JQuery实现鼠标滚轮滑动到页面节点

下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍，并通过展示效果图展示给大家。

基于jQuery鼠标滚轮滑动到页面节点部分。这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效。效果图如下：

实现的代码。

html代码：


    
      
 
 适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

不支持IE8及以下浏览器。



      
      
      

      滑动鼠标滚轮

    
  
  
    
      基本使用
      需要引入 jQuery 1.6+ 以及缓冲动画插件jquery.easing.js.
        <! 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() {}
  });
 
    
  
  
    
      选项设置
      
 section
 节点部分选择器.
 sectionName
 每一个section节点对应的data属性.
 easing
 定义缓冲动画.
 offset
 定义每个色彩tion节点的偏移量.
 scrollbars
 是否显示滚动条.
 before
 回调函数,滚动开始前触发.
 after
 回调函数,滚动完成后触发.
      
    
  
  
    
      方法
      滑动到指定的节点。
        $.scrollify("move","#name");

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"));
      });
    });

以上代码就是应用JQuery实现鼠标滚轮滑动到页面节点的全部内容，希望对大家在今后的项目过程中有所帮助。

JQuery实现鼠标滚轮滑动到页面节点

JavaScript相关栏目本月热门文章