Maison > Article > interface Web > JQuery réalise le glissement de la molette de la souris vers la page node_jquery
Ce qui suit est une introduction détaillée à la façon dont la molette de la souris glisse vers le nœud de page via un morceau de code JQuery et est montrée à tout le monde via un rendu d'affichage.
Glissez vers la partie nœud de la page en fonction de la molette de la souris jQuery. Il s'agit d'un effet spécial basé sur jQuery CSS3 qui utilise la molette de la souris ou des gestes pour glisser vers une partie du nœud de la page. Le rendu est le suivant :
Code d'implémentation.
Code HTML :
<section class="panel home" data-section-name="home"> <div class="inner"> <header> <h1></h1> <p class="tagline">适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.<br><br>不支持IE8及以下浏览器。<br><br><br></p> </header> <div style="text-algin:center;margin:10px auto"> <script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br /> <a href="#overview" class="scroll">滑动鼠标滚轮</a> </div> </section> <section class="panel overview" data-section-name="overview"> <div class="inner"> <h2>基本使用</h2> <p>需要引入 jQuery 1.6+ 以及缓冲动画插件jquery.easing.js.</p> <pre class="brush:php;toolbar:false"> <! doctype html> <html> <head> <script> $(function() { $.scrollify({ section : "section", }); }); </script> </head> <body> <section></section> <section></section> </body> </html>
$.scrollify({ section : "section", sectionName : "section-name", easing: "easeOutExpo", scrollSpeed: 1100, offset : 0, scrollbars: true, before:function() {}, after:function() {} });
滑动到指定的节点。
$.scrollify("move","#name");
code js :
$(function () { $(".panel").css({ "height": $(window).height() }); var timer; $(window).resize(function () { clearTimeout(timer); timer = setTimeout(function () { $(".panel").css({ "height": $(window).height() }); }, 40); }); $.scrollify({ section: ".panel" }); $(".scroll").click(function (e) { e.preventDefault(); $.scrollify("move", $(this).attr("href")); }); });
Le code ci-dessus représente tout le contenu de l'utilisation de JQuery pour réaliser le glissement de la molette de la souris vers le nœud de la page. J'espère qu'il sera utile à tout le monde dans le futur processus de projet.