js 滑动鼠标滑轮翻页

今天项目中用到了通过滑动鼠标滑轮触发事件,再网上找了一些例子,在FireFox下面使用正常,但是在IE和Google等浏览器下使用滑动一次滑轮却触发了两次事件,网上找了一些解决方案,最后选择了一个简单的解决方案,如果在使用的过程中出现问题,我会继续改进。

<script type="text/javascript">
    $(document).ready(function(){
        var flag = true;
        /*鼠标滑轮滚动事件的处理*/
        var scrollFunc=function(e){
            var direct=0;
            e=e || window.event;
            if(e.wheelDelta){//IE/Opera/Chrome
                if(flag){
                    pageTurring(e.wheelDelta);
                }else{
                    flag = true;
                }
            }else if(e.detail){//Firefox
                pagepageTurringFirefox(e.detail);
            }
            ScrollText(direct);
        }

        /*注册事件*/
        if(document.addEventListener){
            document.addEventListener(‘DOMMouseScroll‘,scrollFunc,false);
        }
        window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

        //其他浏览器翻页,根据参数的进行翻页(负数为下一页,)
        function pageTurring(e){
            flag = false;
            alert(e);
        }
        //火狐翻页,根据参数的进行翻页(正数为下一页,)
        function pagepageTurringFirefox(e){
            alert(e);
        }
    });
</script>

有什么问题欢迎大家提出,一起改进

时间: 2024-11-05 01:12:04

js 滑动鼠标滑轮翻页的相关文章

JS实现鼠标移入标签页的完整title提示

一.条件 1.在鼠标移入标签上时可以捕获到 title 对象身上触发的事件: 2.网页标签不在页面的范围内了,但是他还是在当前屏幕内: 3.标签与页面相对于屏幕的位置都可以得到. 有了以上三个条件我们就能够自己实现JS实现鼠标移入标签页的完整 title 提示的功能了. 二.实现功能 直接上代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-

turn.js 图书翻页效果

今天用turn.js 做图书的翻页效果遇到问题: 图片路径总是出错 调了一天,总算调出来了 我用的thinkphp,其他的不知道是不是一样 两个地方要改动: 1.后台查出地址 注意的地方:1.地址要完全的 2.js要用json格式的数据 $more = M('File')->where(array('id'=>$id))->find(); $more1 = json_decode($more['more'],true); foreach($more1 as $k => $v){ /

FineReport——JS二次开发(自定义翻页按钮)

FR允许自定义工具栏上面的按钮,并提交JS方法: 对于翻页功能,大概有首页,下一页,上一页,最后一页,以及跳转页等功能. 不得不说的是,在HTML页面自定义的按钮如何获取到报表模板,通过FR提供的JS方法,可以获取到这个模板(reportFrame为html标签iframe的id名称): document.getElementById('reportFrame').contentWindow.contentPane.方法名称(); 首页: document.getElementById('rep

XtraGrid滚轮翻页

滚轮翻页与传动的翻页更为方便,经过本人一番探讨与琢磨终于在XtraGrid的GridView中实现了鼠标滚轮翻页. 我新建了一个组件继承原本的GridControl,在组件中添加了一个ImageList,专门存放一些资源图片.用于实现动态图的效果. 添加一个自定义委托的参数与枚举,委托参数用于传递分页的信息.     public class PagingEventArgs : EventArgs     {        public int PageSize { get; set; }   

放大镜 鼠标滑入 鼠标滑轮放大

今天是周六,陪朋友逛了一天,回来就写代码,写到吐血了~~~ 已实现功能: 1.图片局部放大 2.按住鼠标右键时,滑动鼠标滑轮,可修改放大缩小倍数 本段代码仍存在问题: 1.代码不够精简 2.按住鼠标右键移动时,放大镜内图片不能随之放大代码并不完善,有时间再写, 原理图,(本小牛手画的,不喜勿喷~~)大概原理是,等比例背景图定位 最终效果: 黄色部分有张 遮罩层背景图         代码: <!DOCTYPE html> <html> <head lang="en&

Atitit easyui翻页组件与vue的集成解决方案attilax总结

===============使用1 ===========\paggingUtil_easyui_vue.js2 C:\Users\Administrator\Desktop\00oa\js\paggingUtil_easyui_vue.js ===============使用 <!-- pagging--> <link rel="stylesheet" type="text/css" href="easyui1.5/themes/de

【jQueryMobile】使用jQueryMobile实现滑动翻页的效果

滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前写的<[jQuery]论手机浏览器中拖拽动作的艰难性>(点击打开链接)中的观点一直,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢? 一.基本目标 在手机浏览器中的jQueryMobile框架页中现实滑动手势翻页的

微信里经常看到的滑动翻页效果,slide

上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大容器tranlateY(性能应该是最好的,但是如果增删一页的话对css影响很大,如果用sass或less除外) html: <!DOCTYPE html> <html> <head> <title></title> <meta name=&qu

NGUI 滑动翻页效果

using UnityEngine; using System.Collections; public class PageView : MonoBehaviour { const int ITEM_NUM = 2; //总页数 const int PAGE_WIDTH = 2048; //页宽 const float DRAG_SPEED = 0.5f; //翻页时间 const int DRAG_OFFECT = 30; //滑动的起点和终点的差需大于这个数才能触发翻页效果 float be