- 浏览: 501099 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (156)
- xml (4)
- web前端 (24)
- jQuery (18)
- java (38)
- SQL (9)
- perl (2)
- OTRS (1)
- GWT (4)
- Linux (32)
- Maven (2)
- Spring (2)
- Oracle Win7 (1)
- css (8)
- eclipse (3)
- mysql (11)
- tomcat (5)
- git (4)
- javascript (22)
- font (1)
- android (1)
- log4j (1)
- email (1)
- sublime plugin (1)
- html (2)
- matches (1)
- php (3)
- apache (3)
- gd (1)
- docker (5)
- rails (1)
- RabbitMQ (1)
- Ubuntu (3)
- L2TP VPN (1)
- nodejs (1)
- oraclejet (1)
- ubutun (1)
- ntp (1)
- ngix (1)
- ssl (1)
- https (1)
- Linux,Debian (2)
- dpkg (1)
- pac (1)
- vi (1)
- vim (1)
- java,http (0)
- httpClient (0)
- shutter (1)
- shell (1)
- redmine (1)
最新评论
-
纵观全局:
配置之后,连接显示不是私密连接
keytool生成证书与Tomcat SSL配置 -
zhuchao_ko:
可以 伪造
java获得ip地址 -
longhua2003:
代码太乱了
java下载文件 -
tomhat:
ccx410 写道 安装gwt报错,unable to ret ...
GWT CellTable -
ccx410:
安装gwt报错,unable to retrieve osgi ...
GWT CellTable
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的。今天简单的研究了一下如何使用javascript来判断鼠标是向上滚动还是向下滚动,简要分享。
首先,不得不说一下,因为不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件,所以在这个过程中需要添加事件监听,代码如下:兼容firefox采用addEventListener监听。
另外判断滚轮向上或向下滚动在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义却是一致的,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
通过运行上述代码我们可以得出以下结果:
在非firefox浏览器中,滚轮向上滚动返回的数值是120,向下滚动返回-120
而在firefox浏览器中,滚轮向上滚动返回的数值是-3,向下滚动返回3
代码部分如下,e.wheelDelta是判断是否为非firefox浏览器,e.detail为firefox浏览器
首先,不得不说一下,因为不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件,所以在这个过程中需要添加事件监听,代码如下:兼容firefox采用addEventListener监听。
/*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
另外判断滚轮向上或向下滚动在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义却是一致的,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
<label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/> <label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/> <script type="text/javascript"> var scrollFunc=function(e){ ee=e || window.event; var t1=document.getElementById("wheelDelta"); var t2=document.getElementById("detail"); if(e.wheelDelta){//IE/Opera/Chrome t1.value=e.wheelDelta; }else if(e.detail){//Firefox t2.value=e.detail; } } /*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome </script>
通过运行上述代码我们可以得出以下结果:
在非firefox浏览器中,滚轮向上滚动返回的数值是120,向下滚动返回-120
而在firefox浏览器中,滚轮向上滚动返回的数值是-3,向下滚动返回3
代码部分如下,e.wheelDelta是判断是否为非firefox浏览器,e.detail为firefox浏览器
if(e.wheelDelta){//IE/Opera/Chrome t1.value=e.wheelDelta; }else if(e.detail){//Firefox t2.value=e.detail; }
发表评论
-
jquery-chosen.js示例使用方法
2021-02-21 17:18 1007## jquery-chosen.js示例使用方法 1. [ ... -
jquery-validate示例使用方法
2021-02-21 14:19 304## 示例使用方法 <form class=&qu ... -
JavaScript SizeToHuman 大小转换为mb kb tb等
2017-08-21 15:16 1465// byte数据单位转换(以B为基底) functio ... -
javascript 监听键盘事件
2017-04-14 10:38 2756var ie; var firefox; ... -
js去除字符串中的html标签,替换"为'
2016-11-10 14:10 1469今天做文本域编辑和提交,文本域的内容最好带格式,于是找了一些插 ... -
JavaScript从数组中删除指定值元素的方法
2016-10-11 13:13 714下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函 ... -
安装nodejs oraclejet
2016-05-05 16:45 793ubuntu下安装nodejs Debian and Ubu ... -
javascript 生成随机码或随机数
2016-01-15 14:01 2002/** * [getRandomNum 生成随机数] ... -
js 一些知识,js获取contxtPath
2015-11-12 13:49 1154var num = 1; var str = '1'; ... -
IE指定文档模式
2015-10-15 15:21 919对于 Web 开发人员来说,文本兼容性是一个要考虑的重要问题。 ... -
js验证组织机构代码
2015-09-18 18:06 43211.全国组织机构代码由八位数字(或大写拉丁字母)本体代码和一位 ... -
JS,Jquery获取各种屏幕的宽度和高度,clientX,offsetX,在父窗口中获取iframe中的元素
2015-04-22 16:49 3367JS,Jquery获取各种屏幕的宽度和高度 Javascri ... -
javascript 保留2位小数
2014-09-15 13:15 1701<script type="text/ ... -
如何在一个页面上让多个jQuery版本共存
2014-09-10 10:22 867如何在一个页面上让多个jQuery共存呢?比如jquery-1 ... -
Spring MVC @RequestBody接收JSON报HTTP 415/400问题的解决
2014-08-27 13:06 3757Ajax请求传@RequestBody(接收JSON)参数时, ... -
JavaScript中实现replaceAll方法
2014-08-21 18:04 1042使用JavaScript replace方法,如果不使用正则表 ... -
javascript Date Format
2014-07-07 23:14 862// 对Date的扩展,将 Date 转化为指定格式的Stri ... -
javascript 数字每隔三位加逗号分隔
2014-06-23 11:55 3935function addCommas(nStr){ nStr ... -
javascript按回车直接提交表单
2014-06-19 12:29 815<script> document.onkeydo ... -
css + javascript 制作tips
2014-06-06 15:43 939<!DOCTYPE html> <html& ...
相关推荐
js鼠标滚动自动隐藏导航菜单是一款当页面向下滚动的时候可以帧动画隐藏,在向上滚动到一定距离时又会显示出来。
当用户控制鼠标向下滚动时,页面顶部的导航栏会变小或消失,当鼠标向上滚动时,导航栏又会变大或出现。这样可以腾出更多的区域显示网页内容,同时也不影响用户对导航菜单的操作。甚至可能l会因为导航栏的放大缩小、...
列表滚动效果js代码 鼠标放置上面列表可根据情况向上或者向下滚动 点击右键,查看源文件
js鼠标滚动自动隐藏导航菜单是一款当页面向下滚动的时候可以帧动画隐藏,在向上滚动到一定距离时又会显示出来。
javascript实现滚动条响应鼠标滑轮的实现上下滚动,示例代码如下
更新说明: + 加入功能 * 修正、完善 ... + 向下、向右滚动 + 开始等待时间 + 连续滚动 * 调整时间单位 * 滚动误差 * 随机死循环 * 加强性能 * 程序优化 0.8.060829 翻屏不间断向上、向左滚动
Direction (0) 滚动方向 (可选,默认为0向上滚动) 可设置的值包括:0,1,2,3,"top","bottom","left","right" (0向上 1向下 2向左 3向右) Step (1) 滚动的步长 (可选,默认值为2,数值越大,滚动越快) Width (760...
禁止鼠标控制暂停或滚动 鼠标悬停滚动 文字翻屏滚动 文字间歇滚动 向/上/下/左/右/翻屏滚动 向上/下连续滚动 向上/下间歇滚动 .....
xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]软件开发网站长修改
Bootstrap News Box 是一个基于 jQuery 和 Bootstrap 3 的插件,通常用来创建能够实现页面滚动的垂直滑块,允许你在滚动 html 内容的时候,自动向上/向下移动内容。 标签:Bootstrap
可以实现图片或文字平滑连续向上或向左滚动 鼠标移动到图片(文字)上停止滚动,移去后继续滚动。 当前图片(文字)数量少于指定数量且图片(文字)总长(宽)度小于指定长(宽)时不进行滚动。 参与滚动的图片...
/*MSClass (Class Of Marquee Scroll通用不... + 向下、向右滚动 + 开始等待时间 + 连续滚动 * 调整时间单位 * 滚动误差 * 随机死循环 * 加强性能 * 程序优化 0.8.060829 翻屏不间断向上、向左滚动
而有关鼠标滚轮的信息则保存在detail属性中,当向上滚动鼠标滚轮时,这个属性的值是-3的倍数,当向下滚动鼠标滚轮时,这个属性的值是3的倍数。function
jQuery滚动隐藏/显示顶部标题 当你在浏览器中向下滚动鼠标时隐藏头部导航,向上滚动时显示. 演示地址:http://www.jq22.com/plugin/597
50:___最简的JavaScript鼠标经过切换图片 51:___有点炫的JavaScript立体图片展示 52:___根据鼠标放上切换内容制作的图片导航 53:___浮动的图片广告 54:___清爽简洁的图片交替导航效果 55:___用CSS实现图片的双边框...
现在是按下SHIFT+鼠标左键 放大图片;ALT+鼠标右键 缩小图片 如何修改成 鼠标滑轮向上滚动 放大图片;向下滚动 缩小图片呢?
这个效果在电脑上演示时,鼠标向上或向下拖协,即可切换图片,实现了图片的翻页效果。如果在手机上测试,那就是手向上滑或向下滑,图片一张一张翻页,可以修改成左右翻页切换那种,上下切换好像不常见,可为你提供一...
支持滚动的TAB切换效果,这是一个完整的例子,含 JS和HTML代码文件,鼠标点击左侧的TAB后,右侧的内容向上或向下滚动,本例子是一个实例集,包括标题展开合拢效果、TAb效果、上下结构的TAB切换等多种风格,一共是5个...
OnePageScroll.js是一款带有背景视觉差效果的jQuery整页滚动特效插件。OnePageScroll.js能够滚动一次鼠标滚轮就使整个页面向上或向下翻动一页。并且在页面滚动时还带有一点视觉差效果。
您可以在滚动条内部单击以快速向上或向下移动。 您可以使用鼠标的滚动按钮来滚动内容。 您可以单击栏中的来快速向上或向下翻页。 您可以在滚动内容内部使用滚动内容。 像素完美。 支持浏览器缩放。 当一个...