鼠标滑轮滚动实现换页
windowAddMouseWheel(); function windowAddMouseWheel() { var i = 0;var j = 0;var scrollFunc = function (e) { e = e || window.event; j = j+e.wheelDelta;/*对位置进行缩小,在超出页面范围时,手动设置一个范围,避免长时间滑动没有效果*/if(j > 0){j = 5;}else if(j < -6554){j = -6500;}panduan(e,j);//调用判断方法,进行页面的定位 }; //给页面绑定滑轮滚动事件 if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); } //滚动滑轮触发scrollFunc方法 window.onmousewheel = document.onmousewheel = scrollFunc; } function panduan(e,j){if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 // alert("滑轮向上滚动i"+j); } // if (e.wheelDelta < 0) { //当滑轮向下滚动时 // alert("滑轮向下滚动"+(-e.wheelDelta)); // } if(j <= 0){if (j <= 0 && j > -922) { //当滑轮向下滚动时 $("#show").html($("#one_one").html());//第一个页面}else if(j < -922 && j >= -1844){$("#show").html($("#two_two").html());//进行页面内容的替换,第二个页面}else if(j < -1844 && j >= -2766){$("#show").html($("#three_three").html());//第三个页面}else if(j < -2766 && j >= -3688){$("#show").html($("#four_four").html());//第四个页面}else if(j < -3688 && j >= -4610){$("#show").html($("#five_five_five").html());//第五个页面}else if(j < -4610 && j >= -5532){$("#show").html($("#six_six").html());//第六个页面}else if(j < -5532 && j >= -6454){$("#show").html($("#seven_seven").html());//第七个页面}else{$("#show").html($("#eight_eight").html());//第八个页面 }}} else if (e.detail) { //Firefox滑轮事件 if (e.detail> 0) { //当滑轮向上滚动时 i++;window.scrollTo(0,300*i);//alert("滑轮向上滚动"+i); } if (e.detail< 0) { //当滑轮向下滚动时 i--;window.scrollTo(0,922*i);//alert("滑轮向下滚动"+i); } } }
转载于:https://www.cnblogs.com/loveMis/p/8558268.html
鼠标滑轮滚动实现换页相关推荐
- 更改Windows鼠标滑轮滚动方向
经常在Mac和Windows PC切换的人往往会遇到这样一个问题,那就是鼠标滑轮的方向恰好相反.改变Mac的鼠标滑轮滚动方向很简单,系统偏好设置-鼠标-滚动方向,把"自然"的对勾勾 ...
- 图片随鼠标滑轮滚动变大变小
* 图片随鼠标滑轮滚动变大变小,最大不超过屏幕宽度-360 */ <HTML> <HEAD> <meta http-equiv="Content-Type&qu ...
- vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
目录 目标 实现原理(要点) 完整代码 s-fullpage 和 s-fullpageItem s-fullpage.vue s-fullpageItem.vue 使用范例 范例效果 目标 实现类似插 ...
- java控制鼠标滑轮的滚动速度来滚动滚动面板和鼠标滑轮滚动事件
//虽然比较短,但还是分享下吧....就当是个随笔吧- //设置滚动面板的滚动速度 JScrollPane.getVerticalScrollBar().setUnitIncrement(10); / ...
- vue实现页面点击页面滚动-禁止鼠标滑轮滚动页面
内容: 一般要求鼠标禁止滑轮滚动页面时,需要实现页面点击滚动,跌跌撞撞,走了很多弯路实现了wwwwww vue代码: // 首先在需要的滑动的页面上d的主标签加鼠标禁止事件, @touchmove.p ...
- html鼠标滚轮监听,js鼠标滑轮滚动监听触发事件
判断鼠标滚动方向执行不同的事件代码,兼容IE.Firefox.chrome浏览器.javascript代码如下: var scrollFunc = function (e) { var direct ...
- HTML 鼠标绑定滚动条,js鼠标滑轮滚动事件绑定(兼容主流浏览器)
今天尝试写基于jquery的滚动条,遇到了滚轮事件的兼容性问题,在firefox下和在IE下以及其它浏览器下,监听的事件有区别,查了下相关资料总结一下不同浏览器下鼠标滚轮事件兼容性的处理方式: 在 f ...
- 判断鼠标滑轮滚动事件
windowAddMouseWheel() {let that = thislet scrollFunc = function (e) {e = e || window.eventif (e.whee ...
- 鼠标滑轮滚动事件(记录下以后用到好找)
//兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐浏览器会识别该 ...
最新文章
- 开发日记-20190527 关键词 ubuntu无线网卡驱动安装
- 文件服务器传输,文件服务器传输
- android 6.0动态权限的申请
- php两个数组找公共部分,PHP开发中如何查找两个数组的交集
- vue npm: react运行时报错npm start — babel-eslint 版本兼容性问题
- Bdsyn百度手机助手是何物,它是怎样神不知鬼不觉地安装到你的电脑里的?
- 程序员面试金典 - 面试题 08.02. 迷路的机器人(DFS/动态规划)
- linux进程管理命令kill,Linux进程管理命令-kill | IT运维网
- 引入外部js如何通知页面其编码格式
- class括号里的object_JVM真香系列:轻松理解class文件到虚拟机(上)
- db2数据库基础知识
- Redis读书笔记(一)Redis可以做什么
- android 仿飞猪日历,vue+vux 仿飞猪app火车票部分(四)
- odi12配置mysql_Oracle数据库之Oracle ODI 12c之多表联合查询以及定时任务设置
- 2022 年值得安装的几个 chrome/edge 扩展神器
- 一道关于SVM的机器学习作业题
- c语言满屏爱心,微信聊天可以发满屏动态爱心了 个性又浪漫!
- 企业如何申请测绘资质?需要那些人员材料?
- Mac 安装包破损 或 软件不受信任无法打开
- ROS:*.bag.active恢复
热门文章
- 发展计算机模拟阵法的小说,关于大刘小说里多次提到的模拟宇宙演变的计算机程序@各种工科生~...
- 全球速卖通优化技巧是什么?
- 《NBA 2K19》PS4国行“先拔头筹”线上活动开启
- [笔记]Windows核心编程《番外篇》几种常见的执行命令行方法
- 白领业余生活,挣钱有妙招!学习淘宝开店实现网商创业梦
- 面试考问Vue Router 的路由模式,这个回答令我直接出局~
- Window10 清除应用和功能中的已卸载软件
- Failure to find was cached in the local repository
- 用计算机怎么算百分之几,百分之多少怎么算(如何用Excel计算百分比?)
- 【数字图像处理】色彩模型