鼠标点击动态滚动指定位置jQuery特效

发布时间：2018-09-01 00:49:31 所属栏目：Unix 来源：站长网

导读：jQuery 控制页面按顺序滚动至指定位置，与滚动条的功能是不一样的，本代码中，当点击标号1的时候，页面会滚动至标号2，当点击标号2，会滚动至标号3，当标号3会回到标号1，也就是循环滚动，有意思吧，这当然比浏览器自带的滚动条有意思哦。为解决一些网页

　　jQuery控制页面按顺序滚动至指定位置，与滚动条的功能是不一样的，本代码中，当点击标号1的时候，页面会滚动至标号2，当点击标号2，会滚动至标号3，当标号3会回到标号1，也就是循环滚动，有意思吧，这当然比浏览器自带的滚动条有意思哦。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery控制页面滚动 - 烈火学院 Liehuo.Net</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk2312" /> <style> html, body { margin: 0; padding: 0; height: 100%; width: 100%; } html, body, input { font-family: Helvetica, Arial, Sans-Serif; font-size: 16px; } div.slide { width: 100%; height: 100%; overflow: hidden; } div.slide h1 { margin: 0; padding: 0.5em; } div.slide ul { list-style: none; margin: 0; padding: 0; } div.slide li { margin: 0.5em; padding: 0 0.5em; line-height: 1.25em; } </style> <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script> $(function(){ //判断是否有DOCTYPE声明，有与没有，scrollTop不一样 var scrollPos; if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { scrollPos = document.documentElement; } else if (typeof document.body != 'undefined') { scrollPos = document.body; } //给标题添加单击事件 $("h1").click(function(){ var nextH1 = $(this).parent().next(); if ( nextH1.length ) { //判断是否是最后一个 var next_top = nextH1.offset().top; $(scrollPos) .animate({ scrollTop : next_top }, "slow"); }else{ var first_top = $("div.slide:first").offset().top; $(scrollPos) .animate({ scrollTop : first_top }, "slow"); } }); }); </script> </head> <body> <div class="slide"> <h1>标号One</h1> <ul> <li>OneOneOneOne</li> <li>OneOneOneOne</li> <li>OneOneOneOne</li> </ul> </div> <div class="slide"> <h1>标号Two</h1> <ul> <li>TwoTwoTwo</li> <li>TwoTwoTwo</li> <li>TwoTwoTwo</li> </ul> <div style="width:468px; margin:15px auto;"> </div> </div> <div class="slide"> <h1>标号Three</h1> <ul> <li>ThreeThreeThree.</li> <li>ThreeThreeThree.</li> <li>ThreeThreeThree.</li> </ul> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：唐山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!