下面分享一个小技巧，根据锚点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> |
时间： 2024-07-28 12:52:18