javascript事件(四)之鼠标滚轮事件
2017-03-01 16:52
525 查看
鼠标滚轮事件
1.模拟滚动条:模拟滚动条的样式很难处理,类似于select的样式就很不好改变。如果页面中非要用样式好看的滚动条,可以先禁用浏览器中的滚动条之后再自己利用拖拽原理实现一个好看的滚动条。可以参考上一篇博客末尾的内容。
2.各浏览器中的鼠标滚轮事件:
A.在IE和Chrome中:
B.在Firefox中:
注意:必须用addEventListener,而且要判断一下是否有addEventListener,否则IE下会出错
3.鼠标滚轮上下滚动的属性:
A.在IE和Chrome中:
鼠标每上滚一下增加120的倍数,每下滚一下增加-120的倍数;
B.在Firefox中:
鼠标每上滚一下增加-3的倍数,每下滚一下增加3的倍数;
4.很明显在鼠标滚轮事件上火狐独树一帜,因此我们需要做到兼容:
练习1:鼠标滚轮控制div高度变化
我不知道为什么火狐下滚动条滚动时div高度没有任何变化
练习2:鼠标滚轮控制输入框里数字变化(向上滚动缩小数字,向下滚动增大数字)
练习3:做一个滚动条拖动时,展示元素内容超出部分的内容(和一个真正滚动条一样)
滚动条原理:(ele.offsetTop-ele2.offsetTop)/ele3.style.top == (ele2.offsetHeight-ele.offsetHeight)/ele3.offsetHeight
(小滚动块到页面顶部的top-滚动条到页面顶部的top)/要求div所需变化的top值 == (滚动条的总高度-小滚动的总高度)/小小滚动的总高度
补充:如果有滚动条会触发滚动的默认事件,阻止默认行为。但是return false会智能阻止on事件所触发的默认行为,不能阻止addEventListener绑定的事件,这种需要通过event下的
1.模拟滚动条:模拟滚动条的样式很难处理,类似于select的样式就很不好改变。如果页面中非要用样式好看的滚动条,可以先禁用浏览器中的滚动条之后再自己利用拖拽原理实现一个好看的滚动条。可以参考上一篇博客末尾的内容。
2.各浏览器中的鼠标滚轮事件:
A.在IE和Chrome中:
onmousewheel
B.在Firefox中:
DOMMouseScroll
注意:必须用addEventListener,而且要判断一下是否有addEventListener,否则IE下会出错
3.鼠标滚轮上下滚动的属性:
A.在IE和Chrome中:
event.wheelDelta
鼠标每上滚一下增加120的倍数,每下滚一下增加-120的倍数;
B.在Firefox中:
ev.detail
鼠标每上滚一下增加-3的倍数,每下滚一下增加3的倍数;
4.很明显在鼠标滚轮事件上火狐独树一帜,因此我们需要做到兼容:
练习1:鼠标滚轮控制div高度变化
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #box{width:100px; height:100px; background-color:red; position:absolute; left:100px; top:100px; z-index:5;} </style> </head> <body> <div id="box"></div> <script> var oDiv = document.getElementById('box'); function fn1(ev){ var ev= ev||event; var b=true; if(ev.wheelDelta){ b=ev.wheelDelta>0?true:false; }else{ b=ev.detail<0?true:false; } if(b){ oDiv.style.height=oDiv.offsetHeight+10+'px'; }else{ oDiv.style.height=oDiv.offsetHeight-10+'px'; } //以上是对滚轮上下属性的兼容处理 } function bind(obj,evname,fn){ if(obj.addEventListener){ if(evname == 'mousewheel'){//此处是对火狐下滚轮事件的兼容 obj.addEventListener('DOMMouseScroll',fn,false); } obj.addEventListener(evname,fn,false); }else{ obj.attachEvent('on'+evname,fn,function(){ fn.call(obj); } )} } bind(document,'mousewheel',fn1); </script> </body> </html>
我不知道为什么火狐下滚动条滚动时div高度没有任何变化
练习2:鼠标滚轮控制输入框里数字变化(向上滚动缩小数字,向下滚动增大数字)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #text1{width:300px;} </style> </head> <body> <input type="text" placeholder='请输入数字,滚动鼠标滚轮改变数字大小' id="text1" /> <script> var oText1 = document.getElementById('text1'); function fn1(ev){ var ev = ev || event; var b = true; if(ev.wheelDelta){ b= ev.wheelDelta>0 ? true:false; }else{ b= ev.detail<0 ? true:false; } if(oText1.value==''){ alert("请输入数字"); }else{ if(b){ oText1.value--; }else{ oText1.value++; } } } function bind(obj,evname,fn){ if(obj.addEventListener){ if(evname == 'mousewheel'){ obj.addEventListener('DOMMouseScroll',fn,false); } obj.addEventListener(evname,fn,false); }else{ obj.attachEvent('on'+evname,fn,function(){ fn.call(obj); } )} } bind(document,'mousewheel',fn1); </script> </body> </html>
练习3:做一个滚动条拖动时,展示元素内容超出部分的内容(和一个真正滚动条一样)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #box{width:20px; height:60px; background-color:red; position:absolute; left:500px;z-index:5;} #box1{width:20px; height:600px; background-color:green; position:absolute; left:500px;z-index:3;} #box2{width:500px; height:600px;background-color:pink;position:absolute;left:540px; overflow:hidden;} #p1{height:800px;background-color:pink; padding:10px 15px; position:absolute;} </style> </head> <body style="height: 1000px;"> <div id="box"></div> <div id="box1"></div> <div id="box2"> <p id="p1">今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套今天好冷啊我想穿外套</p> </div> <script> var oDiv = document.getElementById('box'); var oDiv1 = document.getElementById('box1'); var oDiv2 = document.getElementById('box2'); var oP1 = document.getElementById('p1'); downMove(oDiv,oDiv1,oP1); function downMove(ele,ele2,ele3){ ele.onmousedown = function(ev){ var ev = ev || event; if(ele.setCapture){ele.setCapture();} var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft; var disX = ev.clientX - ele.offsetLeft + scrollLeft; var disY = ev.clientY - ele.offsetTop + scrollTop; document.onmousemove = function(ev){ var ev = ev || event; var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft; var oTop = ev.clientY - disY + scrollTop; if(oTop<ele2.offsetTop){ oTop = ele2.offsetTop; } if(oTop>ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight){ oTop = ele2.offsetTop+ele2.offsetHeight-ele.offsetHeight; } ele3.style.top=-(ele.offsetTop-ele2.offsetTop)*ele3.offsetHeight/(ele2.offsetHeight-ele.offsetHeight) + 'px'; ele.style.top = oTop + 'px'; } document.onmouseup = function(){ if(ele.releaseCapture){ele.releaseCapture();} document.onmousemove = document.onmouseup = null; } return false; } } </script> </body> </html>
滚动条原理:(ele.offsetTop-ele2.offsetTop)/ele3.style.top == (ele2.offsetHeight-ele.offsetHeight)/ele3.offsetHeight
(小滚动块到页面顶部的top-滚动条到页面顶部的top)/要求div所需变化的top值 == (滚动条的总高度-小滚动的总高度)/小小滚动的总高度
补充:如果有滚动条会触发滚动的默认事件,阻止默认行为。但是return false会智能阻止on事件所触发的默认行为,不能阻止addEventListener绑定的事件,这种需要通过event下的
ev.preventDefault()来阻止。
相关文章推荐
- javascript 鼠标滚轮事件
- 浅谈Javascript鼠标和滚轮事件
- javascript基础四 (事件应用鼠标滚轮)
- 关于JavaScript中监听鼠标滚轮事件
- javascript控制鼠标滚轮事件
- javascript实现禁止鼠标滚轮事件
- javascript 兼容鼠标滚轮事件
- JavaScript焦点事件、鼠标事件和滚轮事件使用详解
- JavaScript焦点事件、鼠标事件和滚轮事件使用详解
- 浅谈Javascript鼠标和滚轮事件
- 解析javascript中鼠标滚轮事件
- 鼠标的滚轮javascript事件
- javascript 鼠标滚轮事件
- javascript监听鼠标滚轮事件浅析
- JavaScript中的鼠标滚轮事件详解
- Javascript鼠标和滚轮事件
- 支持IE和Firefox的鼠标滚轮事件JavaScript代码
- JavaScript事件类型中焦点、鼠标和滚轮事件详解
- javascript实现禁止鼠标滚轮事件
- JavaScript中的鼠标滚轮事件详解