【笔记】JQuery实现鼠标滚轮滑动到页面节点
1 <section class="panel home" data-section-name="home"> 2 <div class="inner"> 3 <header> 4 <h1></h1> 5 <p class="tagline">适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.<br><br>不支持IE8及以下浏览器。<br><br><br></p> 6 </header> 7 <div style="text-algin:center;margin:10px auto"> 8 <script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br /> 9 <a href="#overview" class="scroll">滑动鼠标滚轮</a> 10 11 </div> 12 </section> 13 <section class="panel overview" data-section-name="overview"> 14 <div class="inner"> 15 <h2>基本使用</h2> 16 <p>需要引入 jQuery 1.6+ 以及缓冲动画插件jquery.easing.js.</p> 17 <pre> 18 <! doctype html> 19 <html> 20 <head> 21 <script> 22 $(function() { 23 $.scrollify({ 24 section : "section", 25 }); 26 }); 27 </script> 28 </head> 29 <body> 30 <section></section> 31 <section></section> 32 </body> 33 </html> 34 </pre> 35 </div> 36 </section> 37 <section class="panel configuration" data-section-name="configuration"> 38 <div class="inner"> 39 <h2>配置</h2> 40 <pre> 41 $.scrollify({ 42 section : "section", 43 sectionName : "section-name", 44 easing: "easeOutExpo", 45 scrollSpeed: 1100, 46 offset : 0, 47 scrollbars: true, 48 before:function() {}, 49 after:function() {} 50 }); 51 </pre> 52 </div> 53 </section> 54 <section class="panel options" data-section-name="options"> 55 <div class="inner"> 56 <h2>选项设置</h2> 57 <dl> 58 <dt>section</dt> 59 <dd>节点部分选择器.</dd> 60 <dt>sectionName</dt> 61 <dd>每一个section节点对应的data属性.</dd> 62 <dt>easing</dt> 63 <dd>定义缓冲动画.</dd> 64 <dt>offset</dt> 65 <dd>定义每个色彩tion节点的偏移量.</dd> 66 <dt>scrollbars</dt> 67 <dd>是否显示滚动条.</dd> 68 <dt>before</dt> 69 <dd>回调函数,滚动开始前触发.</dd> 70 <dt>after</dt> 71 <dd>回调函数,滚动完成后触发.</dd> 72 </dl> 73 </div> 74 </section> 75 <section class="panel methods" data-section-name="methods"> 76 <div class="inner"> 77 <h2>方法</h2> 78 <p>滑动到指定的节点。</p> 79 <pre> 80 $.scrollify("move","#name"); 81 </pre> 82 <div style="text-algin:center;margin:10px auto"> 83 <script src="/js/ad_js/bd_76090.js" type="text/javascript"></script> 84 </div><br /> 85 </div> 86 </section>
1 $(function () { 2 $(".panel").css({ "height": $(window).height() }); 3 var timer; 4 5 $(window).resize(function () { 6 clearTimeout(timer); 7 timer = setTimeout(function () { 8 $(".panel").css({ "height": $(window).height() }); 9 }, 40); 10 }); 11 12 $.scrollify({ 13 section: ".panel" 14 }); 15 16 17 $(".scroll").click(function (e) { 18 e.preventDefault(); 19 $.scrollify("move", $(this).attr("href")); 20 }); 21 });
mark。
转自：http://www.jb51.net/article/70128.htm
