javascript 学习之自定义滚动条加滚轮事件
2014-08-14 18:06
501 查看
要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个。
1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候,只要鼠标滚动的方法就行了,而这通过检测datail的正负号就可以确定
2.其他的用mousewheel(Ie是onmousewheel),通过检测wheelDelta
View Code
1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候,只要鼠标滚动的方法就行了,而这通过检测datail的正负号就可以确定
2.其他的用mousewheel(Ie是onmousewheel),通过检测wheelDelta
<!doctype html> <html> <head> <title>拖拽-加滚轮</title> <style> .main{ width: 300px; height: 400px; background: #ccc; margin: 10px auto;overflow: hidden;} .main-content{width: 300px; position: relative; height: 400px; overflow: hidden;} .main-content-c{width: 280px; background: #0F9932; position: absolute; top: 0;} .target{width: 20px; background: #eee;height: 400px; position: absolute; top: 0;right: 0;} .bar{width: 20px;min-height: 10px; background: #333;border-radius: 10px; position: absolute; top: 0;} </style> <script> window.onload= function(){ var oContent = document.getElementById("content"); var oTxt = getByClass(oContent,"main-content-c")[0]; var oTarg = getByClass(oContent,"target")[0]; var oBar = getByClass(oContent,"bar")[0]; oBar.style.height = oTarg.offsetHeight*(oContent.offsetHeight/oTxt.offsetHeight)+'px'; oBar.onmousedown = function(ev){ var oEvent = ev || event; var disY = oEvent.clientY - oBar.offsetTop; document.onmousemove = function(ev){ var oEvent = ev || event; var t = oEvent.clientY - disY; setPos(t); } document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; oBar.releaseCapture && oBar.releaseCapture(); } oBar.setCapture && oBar.setCapture(); oEvent.preventDefault && oEvent.preventDefault(); return false; } function setPos(t){ if(t<0){ t =0; }else if(t>oTarg.offsetHeight-oBar.offsetHeight){ t = oTarg.offsetHeight-oBar.offsetHeight; } oBar.style.top = t+'px'; var scale = t/(oTarg.offsetHeight-oBar.offsetHeight); oTxt.style.top = -scale*(oTxt.offsetHeight-oContent.offsetHeight)+'px'; } addMouseWheel(oContent,function(down){ var t = oBar.offsetTop; if(down){ t +=10; }else{ t -=10; } setPos(t); }); } function getByClass(oParent,sClass){ if(oParent.getElementsByClassName){ return oParent.getElementsByClassName(sClass); } var aEle = oParent.getElementsByTagName("*"); var aRes = []; var reg = new RegExp('\\b'+sClass+'\\b'); for(var i=0;i<aEle.length;i++){ if(reg.test(aEle[i].className)){ aRes.push(aEle[i]); } } return aEle; } function addMouseWheel(obj,fn){ function fnWhell(ev){ var oEvent = ev || event; var bDown = false; bDown = oEvent.wheelDelta ? oEvent.wheelDelta<0 : oEvent.detail>0; fn && fn(bDown,oEvent); oEvent.preventDefault && oEvent.preventDefault(); return false; } if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1){ obj.addEventListener("DOMMouseScroll",fnWhell,false); }else{ addEvent(obj,'mousewheel',fnWhell); } } function addEvent(obj,sEv,fn){ if(obj.addEventListener){ obj.addEventListener(sEv,fn,false); }else{ obj.attachEvent('on'+sEv,fn); } } </script> </head> <body> <div class="main"> <div class="main-content" id="content"> <div class="main-content-c"> 正当我伸伸懒腰,打算上个厕所的时候,突然想到一件事情:如果模块越来越多,那么多文件都要分开加载?那岂不严重影响性能!?(啥,你不知道为啥?) 要压缩合并JavaScript呀!于是,我强忍住那股液体,开始用YUICompressor来压缩,并手动合并了两个文件。 这里就不展示结果了,因为很蛋疼,完全对不住我刚才忍住液体的勇气!结果当然是,失败。 为什么会失败呢?自己想了想,同时打开压缩后的代码一看,才发现原因: 压缩后之后,require变量变成了a变量。SeaJS是通过require字面来判断模块之间的依赖关系的,所以,require变量不能被简化。 嗯,SeaJS已经替我们想到了这个问题,于是我们就采用SeaJS提供的方式来合并压缩吧(当然你也可以自己用别的方式压缩)。 SeaJS在2.0之前,是采用SPM作为压缩合并工具的,到了2.0,改为Grunt.js,SPM变为包管理工具,类似NPM(不知道NPM?Google一下吧) 自动化不仅是科技带给社会的便利,也是Grunt带给前端的瑞士军刀。使用Grunt,可以很方便的定制各种任务,如压缩、合并等。使用Grunt之前,需要安装node环境和grunt工具,Google一下,十分钟后回来。 …… Grunt最核心的就两个部分,package.json、Gruntfile.js。 a. package.json Grunt把一个项目/目录视为一个npm模块,package.json就是用来描述这个模块的信息,包括name、version、author等等。 这里强调一下,Grunt既然将该目录视为一个模块,那么该模块当然可以依赖其他模块。 我们看本示例的: 正当我伸伸懒腰,打算上个厕所的时候,突然想到一件事情:如果模块越来越多,那么多文件都要分开加载?那岂不严重影响性能!?(啥,你不知道为啥?) 要压缩合并JavaScript呀!于是,我强忍住那股液体,开始用YUICompressor来压缩,并手动合并了两个文件。 这里就不展示结果了,因为很蛋疼,完全对不住我刚才忍住液体的勇气!结果当然是,失败。 为什么会失败呢?自己想了想,同时打开压缩后的代码一看,才发现原因: 压缩后之后,require变量变成了a变量。SeaJS是通过require字面来判断模块之间的依赖关系的,所以,require变量不能被简化。 嗯,SeaJS已经替我们想到了这个问题,于是我们就采用SeaJS提供的方式来合并压缩吧(当然你也可以自己用别的方式压缩)。 SeaJS在2.0之前,是采用SPM作为压缩合并工具的,到了2.0,改为Grunt.js,SPM变为包管理工具,类似NPM(不知道NPM?Google一下吧) 自动化不仅是科技带给社会的便利,也是Grunt带给前端的瑞士军刀。使用Grunt,可以很方便的定制各种任务,如压缩、合并等。使用Grunt之前,需要安装node环境和grunt工具,Google一下,十分钟后回来。 …… Grunt最核心的就两个部分,package.json、Gruntfile.js。 a. package.json Grunt把一个项目/目录视为一个npm模块,package.json就是用来描述这个模块的信息,包括name、version、author等等。 这里强调一下,Grunt既然将该目录视为一个模块,那么该模块当然可以依赖其他模块。 我们看本示例的: </div> <div class="target"> <div class="bar"></div> </div> </div> </div> </body> </html>
View Code
相关文章推荐
- JS自定义滚动条效果+鼠标滚轮事件
- JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
- javascript window.onerror事件学习新收获
- javascript 事件模型学习笔记
- 2.0Tip/Trick之Silverlight.js, Silverlight.supportedUserAgent.js, 自定义启动界面, 响应鼠标滚轮事件
- 自定义事件的学习
- JavaScript学习:事件
- javascript学习笔记(五)--事件
- Javascript学习笔记13——关于响应事件
- 稳扎稳打Silverlight(30) - 2.0Tip/Trick之Silverlight.js, Silverlight.supportedUserAgent.js, 自定义启动界面, 响应鼠标滚轮事件
- 稳扎稳打Silverlight(30) - 2.0Tip/Trick之Silverlight.js, Silverlight.supportedUserAgent.js, 自定义启动界面, 响应鼠标滚轮事件
- JAVASCRIPT 自定义onchange事件
- This event supports the .NET Framework infrastructure and is not intended to be used directly from your code?继承自VScrollbar的自定义winform控件,某些事件不触发的问题(Winform控件开发学习)
- JavaScript学习-事件处理
- JavaScript学习笔记 3-if-then 和Link Events(链接事件)
- javascript事件学习笔记
- javascript window.onerror事件学习新收获
- 支持IE和Firefox的鼠标滚轮事件JavaScript代码
- IssueVision 学习笔记(二)-----为控件添加自定义属性和事件
- 【Javascript】javascript学习 十六 JavaScript 事件