js判断鼠标滑轮滚动方向并根据滚动的方向触发不同的事件
<script>
var scrollFunc = function (e) {
var direct = 0;
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
alert("滑轮向上滚动");
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
alert("滑轮向下滚动");
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向上滚动时
alert("滑轮向上滚动");
}
if (e.detail< 0) { //当滑轮向下滚动时
alert("滑轮向下滚动");
}
}
ScrollText(direct);
}
//给页面绑定滑轮滚动事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法
window.onmousewheel = document.onmousewheel = scrollFunc;
</script>
js判断鼠标滑轮滚动方向并根据滚动的方向触发不同的事件的更多相关文章
- JS 判断鼠标滚轮的上下滚动
JS 判断鼠标滚轮的上下滚动 <script type="text/javascript"> var scrollFunc = function (e) { e = ...
- JavaScript判断鼠标滑轮是向下还是向上滚动
我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...
- JS如何判断鼠标滚轮向上还是向下滚动
前几天偶然看到某前端群有人在问:JS如何判断鼠标滚轮向上还是向下滚动? 我想了想,有点蒙蔽,心想难道不是用scrollTop来判断吗? 但我不确定,也出于好奇心,于是开始了一番探索 思路:通过even ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- JS判断鼠标移入元素的方向
最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...
- js 判断鼠标滚轮方向
最近因为公司项目的要求,需要做页面的全屏滚动切换效果. 页面的切换,需要脚本监听鼠标滑轮的滚动事件,来判断页面是向上切换or向下切换. 这里的脚本很简单,我就直接贴出来吧. $('html').on( ...
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- js判断鼠标向上滚动并浮动导航
<div id="Jnav"> <ul class="nav"> <li><a href="#"& ...
随机推荐
- linux关于进程、内存和cpu情况
1.load average: 2.03, 1.76, 1.80 1分钟.5分钟.15分钟平均负载 2.%Cpu(s):100.0 us, 0.0 sy, 0.0 ni, 0.0 id, 0.0 wa ...
- Maven配置项目依赖使用本地仓库的方法汇总
Maven配置项目使用本地仓库有以下方式实现: 1.类似本地仓库,但是属于本地依赖,比如某个JAR包是引用第三方的,直接放在了项目的lib文件夹,那么此时可以如下配置项目的POM: <depen ...
- Confluence 导出为 PDF 格式 - 导出多个页面或者整个空间
使用 Confluence 的空间导出功能,你可以将多个页面或者整个 Confluence 站点转换为 PDF 文件. 希望使用空间导出功能,你需要 导出空间(Export Space)权限.请查看 ...
- GoF23种设计模式之行为型模式之模板方法
概述 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中. TemplateMethod使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 适用性 1.一次性实现一个算法的不变的部分, ...
- sqli-labs less1 &&less3&&less4学习心得
0x01.less1 id=1/ id=1 and 1=1结果正常 id=1 and 1=2结果正常,不合理 id=1'提示:
- 03009_HttpServletResponse
1.HttpServletResponse概述 (1)我们在创建Servlet时会覆盖service()方法,或doGet()/doPost(),这些方法都有两个参数,一个为代表请求的request和 ...
- PostgreSQL 全文索引
-- 首先要创建自定义的词典,在不使用停用词文件的情况下创建自定义词典,例如: CREATE TEXT SEARCH DICTIONARY english_stem_nostop ( Template ...
- andorid studio 环境搭建
1 安装jdk,配置jdk的环境变量http://www.cnblogs.com/liuhongfeng/p/4177568.html(通过java ,javac, java -version来察看j ...
- [uiautomator篇] 如何获取apk的包名 博客模板
Android自动化学习笔记:获取APK包名的几种方法 ------------------------------------------------------------------------ ...
- [uiautomator篇] [4] 运行成功的日志打印---最后写一个脚本来实现
Testing started at 18:23 ... 05/10 18:23:01: Launching ChangeTextBehaviorTestNo apk changes detected ...