鼠标滚轮动画

function wheelFun(element,up,down){

element.onmousewheel = fn;

if (window.addEventListener) {

element.addEventListener("DOMMouseScroll",fn, false);

}

function fn(event){

var event = event || window.event;

if (event.wheelDelta > 0 || event.detail < 0) {

up();

} else{

down();

}

}

}

wheelFun(document,function(){

console.log(1);

},function(){

console.log(2);

});

时间: 2024-10-13 01:46:12

鼠标滚轮动画的相关文章

基于jQuery鼠标滚轮滑动到页面节点部分

基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="panel home" data-section-name="home"> <div class="inner"> <header> <h1></h1> <

鼠标滚轮事件

由于浏览器的不同,对鼠标滚轮事件也有所不同,大致可分为DOMMouseScroll 和onmousewheel两类 1.第一类是Firefox支持的DOMMouseScroll事件,此事件必须以addEventListener来绑定,当鼠标滚轮上下滚动时 ev.detail向上为-3,向下为3. 2.第二类是IE/chrome支持的onmousewheel事件,当鼠标滚轮上下滚动时 ev.wheelDelta向上为120,向下为-120.

监听鼠标滚轮(js+jq),xp系统下也OK

应项目需求,运用了监听滚轮的事件,发现在xp系统下使用jquery的mousewheel.js来做,会导致无论滚轮怎么滚,都只能向下滚...后面使用了原生js的,就可以了. jquery: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt

兼容各浏览器的鼠标滚轮事件

今天趁着工作闲暇的时间,写了一个简单的兼容各浏览器的鼠标滚轮方法: 代码: function mouseWheel(){ if(document.addEventListener){ document.body.addEventListener('mousewheel',function(e){ Detail(e); e.stopPropagation(); e.preventDefalut(); }); document.body.addEventListener('DOMMouseScrol

鼠标滚轮事件的监听

鼠标滚轮事件的监听原理:判断鼠标滚轮的滚动获取一个值,根据这个值判断滚动的方向.分析:首先,判断滚轮方向.Firefox:detail,取值为-/+3(负值向上,正值向下):其他:wheelDelta,取值为+/-120(正值向上,负值向下).兼容所有浏览器的的封装: ? 1 2 3 4 5 6 7 8 9 10 function scrollEvent(ev){     ev = ev || window.event;     var data = '';     if(ev.wheelDel

鼠标滚轮改变图片大小

<!DOCTYPE html"> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>通过鼠标滚动-放大缩小图片</title> <meta name="description&

支持鼠标滚轮图片自适应的焦点图代码等

支持鼠标滚轮图片自适应的焦点图代码 支持鼠标滚轮图片自适应的焦点图代码,纯JS构建,可用键盘左右键切换图片,倒序回滚,另外鼠标停止响应后可自动播放功能,兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.在head区域引入样式表文件lrtk.css 2.在head区域引入lrtk.js 3.在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可 4.修改间隔时间和自动播放倒计时时间,请打开lrtk.js根据注释提示修改 5.去掉首页文字提示后,请注

鼠标滚轮(mousewheel)和DOMMouseScroll事件

IE6.0首先实现了mousewheel事件.此后,Opera.Chrome和Safari也都实现了这个事件.当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时(无论向下还是向上),就会触发mousewheel事件.这个事件可以在任何元素上面触发,最终会冒泡到document(IE)或window(Opera.Chrome.及Safari)对象.与mousewheel事件对应的event对象包含鼠标事件的所有标准信息之外,还包含一个特殊的wheelDelta属性.当用于向前滚动鼠标滚轮是,wh

JS鼠标滚轮事件解析

一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有firefox支持) 另外在操作的过程中需要添加事件监听,兼容性写法 代码如下: /*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); // W3C