跳转到主内容
websoft网络软件专家 - 深耕网络技术,打造实用软件!

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

下面通过一段jquery代码实现鼠标滚轮滑动到页面节点的详细介绍,并通过展示效果图展示给大家。 基于jQuery鼠标滚轮滑动到页面节点部分。这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效。效果图如下: 实现的代码。 html代码:

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

不支持IE8及以下浏览器。



滑动鼠标滚轮

基本使用

需要引入 jQuery 1.6+ 以及缓冲动画插件jquery.easing.js.

  
  
    
      
    
    
      
配置
$.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实现鼠标滚轮滑动到页面节点的全部内容,希望对大家在今后的项目过程中有所帮助。

相关文章