<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>JavaScript onmousewheel鼠标滚轮示例</title>

 <style>

 #div1 { width:100px; height:100px; background-color:#}

 </style>

 <script>

 window.onload = function(){

     var oDiv = document.getElementById('div1');

     oDiv.onmousewheel = fn;  

     if(oDiv.addEventListener){

         oDiv.addEventListener('DOMMouseScroll',fn,false);

     }

     function fn(ev){

         var ev = ev || event;

         var b = true;

         if(ev.wheelDelta){

             b = ev.wheelDelta >  ? true : false;

             }else{

                 b = ev.detail <  ? true : false;

                 }

         if(b){

             if(this.offsetHeight < ){

                 this.style.height = this.offsetHeight +  + 'px';

                 };

             }else{

                 if(this.offsetHeight > ){

                     this.style.height = this.offsetHeight -  + 'px';

                 }

             }

         if(ev.preventDefault){

             ev.preventDefault();

             }

         return false;

         }

 }

 </script>

 </head>

 <body>

 <div id="div1"></div>

 </body>

 </html>

JavaScript onmousewheel鼠标滚轮示例的更多相关文章

  1. javaScript判断鼠标滚轮的上下滚动

    分享一个js实现判断鼠标滚轮的上下滚动: <script type="text/javascript"> var scrollFunc = function (e) { ...

  2. JavaScript键盘鼠标事件处理

    监听键盘鼠标事件 监听某个按键事件 当键盘上的某个键被按下时,会依次触发一次下面的事件: onkeydown: 键盘按下这个动作(按下键盘) onkeypress: 键盘被按住(一直按着键盘不动) o ...

  3. JavaScript中的鼠标滚轮事件详解

    JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

  4. HTML中鼠标滚轮事件onmousewheel处理

    滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...

  5. javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件

    javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件 发布时间:2015-02-07   编辑:www.jquerycn.cn 本文学习下,javascript ...

  6. 纯javaScript实现元素平滑滚动，改进前两个版本，支持鼠标滚轮滚动和点击元素滚动，滚动更顺畅

    windowScroll(id, number, distance, direction, obj) 参数介绍: 1.id:所要滚动的元素id; 2.number:滚动次数; 3.distance:每 ...

  7. Javascript和jquery事件--鼠标滚轮事件WheelEvent

    <1>js事件 滚轮事件在js中,不同浏览器还是有不同的,介于我只测试谷歌和火狐浏览器的情况,其他浏览器有待自行探索.有三种写法: target.onmousewheel = wheel; ...

  8. JavaScript判断鼠标滑轮是向下还是向上滚动

    我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...

  9. 鼠标滚轮事件MouseWheel

    其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...

随机推荐

  1. [JavaScript]为JS处理二进制数据提供可能性的WEB API

    写这篇博客的起源是在div.io上的一篇文章<你所不知道的JavaScript数组>by 小胡子哥下的评论中的讨论. 因为随着XHR2和现代浏览器的普及,在浏览器当中处理二进制不再向过去那 ...

  2. HomeBrew 安转beta版软件

    今天想装测试版的cocoapods,用 brew install cocoapods 后,总是安装稳定版,就是1.1.0,不是最新的beta版,发现用下面这个命令可以装最新beta版 brew ins ...

  3. JavaScript 输入小数点(event.key或event.code)

    1. 概述 1.1 说明 在开发过程中,有时候需要仅输入数字与小数,故记录下使用过的功能,以便后期使用. 1.2 key 定义:按下按键时返回的标识符,按键标识符是表示键盘按钮的字符串(如1,2,a等 ...

  4. CSS 重置默认样式

    1. 概述 1.1 说明 css重置样式主要是为了让各个浏览器的CSS样式有一个统一的基准,使HTML元素样式在跨浏览器时有一致性的效果. 备注:浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的 ...

  5. 36)django-jsonp跨域

    一:什么是JSONP JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 serve ...

  6. Confluence 6 垃圾收集性能问题

    这个文章与 Oracle 的 Hotspot JVM 虚拟机的内存管理为参照的.这些建议是我们在对大的 Confluence 安装实例用户进行咨询服务的时候得到的最佳配置方案. 请不要在 Conflu ...

  7. Confluence 6 订阅所应用的所有小工具

    你可以从你的 Jira, Bamboo,FishEye 或 Crucible 站点中订阅所有的小工具到你的 Confluence 小工具目录中.用户可以为他们的页面查找和选择小工具. 希望订阅其他站点 ...

  8. 【JS】中的原型prototype到底是个啥

    一.什么是原型 原型prototype是函数的一个属性,这个属性是一个指针,指向一个对象(原型对象),这个原型对象的用途是包含可以由特定类型的所有实例共享的属性和方法. 函数也是一种对象.它也是属性的 ...

  9. Java编程之前的复习和练习

    日期:2018.7.14 星期六 博客期:001 今天先是试着写一下博客,最近去青海旅游了,学习时间有点少,但空余时间还是有学习的,不管怎么样吧!先说一下我的这几天的成果——“Bignum”类,虽然很 ...

  10. sql中某条件不为空，可能有的小祖宗会喷了，这还用总结？emmm，我渣，我觉得有一点意思对于第二种(土味)

    需求说明:存在父子关系的单表,父级别的parent_id为空,那么要得到所有的子级别的数据信息,查询的条件就是:父id不为空. 个人做法:where parent_id is not null or ...