萬盛學電腦網 >> 腳本專題 >> javascript >> jquery根據錨點offset值實現動畫切換
jquery根據錨點offset值實現動畫切換
下面分享一個小技巧，根據錨點offset值來實現動畫切換
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 02 <html xmlns="http://www.w3.org/1999/xhtml"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 05 <title>無標題文檔</title> 06 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 07 <style> 08 *{ margin:0; padding:0;} 09 .main{ width:1000px; margin:0 auto; position:relative; } 10 .main img{ float:left;} 11 12 .bg{ position:absolute; width:100%; z-index:-5;} 13 .bg01{ height:885px;background:url(../images/b_01.jpg) no-repeat center;} 14 .bg02{ height:938px;background:url(../images/b_04.jpg) no-repeat center; } 15 .bg03{ height:946px;background:url(../images/b_02.jpg) no-repeat center; } 16 .bg04{ height:946px;background:url(../images/b_03.jpg) no-repeat center; } 17 18 .div_scoll{ position:fixed; width:50px; height:200px; right:100px; top:50%;} 19 a{ display:block; background:#3F6; color:#000; width:50px; height:50px; } 20 </style> 21 </head> 22 23 <body> 24 <div class="wrapper"> 25 <div class="main"> 26 <div id="tab_01" class="tab"><img src="images/m_01.jpg" alt="" /></div> 27 <div id="tab_02" class="tab"><img src="images/m_04.jpg" alt="" /></div> 28 <div id="tab_03" class="tab"><img src="images/m_02.jpg" alt="" /></div> 29 <div id="tab_04" class="tab"><img src="images/m_03.jpg" alt="" /></div> 30 </div> 31 <div class="bg"> 32 <div class="bg01" id="bg01"></div> 33 <div class="bg02" id="bg02"></div> 34 <div class="bg03" id="bg03"></div> 35 <div class="bg04" id="bg04"></div> 36 </div> 37 </div> 38 <div class="div_scoll"> 39 <a href="#bg01">圖1</a> 40 <a href="#bg02">圖2</a> 41 <a href="#bg03">圖3</a> 42 <a href="#bg04">圖4</a> 43 </div> 44 <script> 45 $(function(){ 46 $(".div_scoll a").click(function(){ 47 $("html,body").animate({ scrollTop:$($(this).attr("href")).offset().top + "px"},1000); 48 }); 49 }); 50 51 </script> 52 </body> 53 </html>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved