jQuery 鼠标滚轮插件应用 mousewheel】的更多相关文章

jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持. mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta. 通过参数delta可以获取鼠标滚轮的方向和速度. 如果delta的值是负的即-1,那么滚轮就是向下滚动,正的1就是向上.…
jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持.mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta.通过参数delta可以获取鼠标滚轮的方向和速度.如果delta的值是负的即-1,那么滚轮就是向下滚动,正的1就是向上. 官方网址: https://github.com/brandonaaron/jquery-mousewheel 插件方法: 1.为了监听滚轮事件,该插件引入了mousewheel事件,…
基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="panel home" data-section-name="home"> <div class="inner"> <header> <h1></h1> <…
delta的值是负的即-1,那么滚轮就是向下滚动.正的1就是向上. 插件方法: 1.为了监听滚轮事件,该插件引入了mousewheel事件.所以我们能够监听元素的mousewheel事件 2.该插件还提供了元素快捷方法mousewheel和unmousewheel用于监听和去掉元素对鼠标滚轮事件支持 $(document) .mousewheel(function(event, delta) { loghandle(event, delta); }); //页面中滚动 $('#test6')  …
使用插件 jquery-mousewheel 下载 $('body').mousewheel(function(event, delta) { ? 'Up' : 'Down'; if (dir == 'Up') { console.log('向上滚动'); } else { console.log('向下滚动'); } return false; });…
onmousewheel (FireFox不支持此事件) // IE/Opera/Chrome/Safari document.body.onmousewheel = function(event) { event = event || window.event; console.dir(event); }; DOMMouseScroll(FireFox独有事件) // Firefox document.body.addEventListener("DOMMouseScroll", f…
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox 却不支持此事件,不过庆幸 Firefox  中提供了另外一个等同的事件:"DOMMouseScroll" . OK,我们现在已经知道了不同浏览器之间实现的差别,兼容代码如下: var addEvent = (function () { if (window.addEventListener…
之前我们分享过很多炫酷实用的jQuery焦点图插件了,今天介绍的这款jQuery焦点图非常特别,所有图片围成一个圆圈,组成一个立体视觉的圆盘,并且可以旋转选择圆盘中的图片.另外,这款jQuery 3D圆盘旋转焦点图插件还支持鼠标滚轮,可以让你更方便地浏览图片. 在线演示源码下载 接下来分析一下实现这款jQuery 3D焦点图的具体过程和源代码,代码主要由HTML.CSS以及jQuery组成,由于JS的参与,相对比较复杂. HTML代码: <ul id="carousel">…
html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width…
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name…