<!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. python学习第6天

    id is ==  代码块 代码块的缓存机制 小数据池(不同代码块的缓存机制) 小数据池(驻留机制)总结 数据类型之间的转换 int bool str 三者转化是可以的. bool 可以与所有的数据类 ...

  2. Golang 类型转换，断言和显式强制转换

    1 前言 类型转换,可以用断言(只能使用在interface{}类型转换成其它类型)和显式类型强制转换(常规是用于基本类型) 2 代码 //graphql-go func(params graphql ...

  3. swift 学习- 15 -- 构造过程 01

    // 构造过程 是使用类,结构体 或 枚举类型的实例之前的准备过程, // 在新实例可用前必须执行这个过程, 具体操作包括 设置实例中每个存储型属性的初始值 和 执行其他必须的设置 或 初始化工作 / ...

  4. Confluence 6 有关 AD 的一些特殊说明

    当应用程序对使用 Active Directory (AD) 的 LDAP 服务器进行同步的时候,同步的任务只对 LDAP 最近修改的数据进行同步而不是对整个数据库进行同步.因为是增量同步,在第一次完 ...

  5. ctrl + alt + T无法启动终端

    kill -9 -1重新进入即可

  6. poj3164 最小树形图板子题

    /* 思路很简单,也不知道哪里错了TAT */ /* N个点通过笛卡尔坐标表示 根节点是1,求最小树形图 */ #include<iostream> #include<cstdio& ...

  7. Nginx详解二十：Nginx深度学习篇之HTTPS的原理和作用、配置及优化

    一.HTTPS原理和作用: 1.为什么需要HTTPS?原因:HTTP不安全1.传输数据被中间人盗用.信息泄露2.数据内容劫持.篡改 2.HTTPS协议的实现对传输内容进行加密以及身份验证 对称加密:加 ...

  8. 谷歌、火狐浏览器 缩放为80% 时，margin值才正确

    声明:小白的笔记,欢迎大神指点.联系QQ:1522025433. 在网页布局中,通过 谷歌浏览器或火狐浏览器 预览时,发现我们定义的盒模型width,height,margin,padding 值都是 ...

  9. 极光推送>>java SDK服务端集成后台项目(使用详解)

    PS:如果你是第一次用推送,那就直接按照我的步骤来,再去看官方文档,这样,更容易能理解操作流程.还有——-请耐心看 极光文档(java SDK)请参考 [ 极光文档 ] 步骤一: 首先,你必须在 [极 ...

  10. SpringMVC + MyBatis + Mysql + Redis(作为二级缓存) 配置

    2016年03月03日 10:37:47 标签: mysql / redis / mybatis / spring mvc / spring 33805 项目环境: 在SpringMVC + MyBa ...