js滚轮换切屏

由于全项目不是自己写的,只是帮别人写js滚轮代码,而且别人项目也还未上线,所以只贴出自己写的那段部分代码,

效果:鼠标滚轮滚动时,网頁屏幕一屏一屏的上下切换

(以下代码在本地电脑的IE,chrome与FireFox这三个浏览器已经测试并且已经成功)

    var sum=0;
    var oTxt=document.getElementById("txt");
    var scrollFunc=function(e){

    var direct=0;
    var men = $(".menu_m").find(".menu").find("li");
    men.each(function (j) {
            if($(this).attr("class")=="m_selected"){
                sum=j;
            }
    });
    e=e || window.event;
    if(e.wheelDelta){//IE/Opera/Chrome
        if(navigator.appName=='Netscape'){
            // Chorme滚一次有两次的效果,所以加0.5
            if(e.wheelDelta>0){

                sum=parseFloat(sum-0.5);

            }
            else{

                sum=parseFloat(sum)+0.5;

            }
        }else{
            if(e.wheelDelta>0)
                sum=parseFloat(sum-1);
            else
                sum=parseFloat(sum+1);
        }
    }else if(e.detail){//Firefox
		//firefox向上向下的值不和上面的一样,可打印出看看
        if(e.detail>0)
                sum=parseFloat(sum+1);
            else
                sum=parseFloat(sum-1);
    }
		//sum出来的,下面就是你想做的事情,我这里是写与当前项目有所以相关联的屏目跳转,但记的要加return false; 要不然,在google和ie中时会出现,滚多了
        var sizes= $(".menu_m").find(".menu").find("li").size();
        if(sum>=0&&parseFloat(sum)<=parseFloat(sizes)-1){
            men.each(function (j) {
                $(this).removeClass("m_selected")
             });
              $(".menu_m").find(".menu li:eq("+sum+")").find("span").click();
              return false;
          }

}
/*注册事件*/
if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
时间: 2024-11-03 03:47:28

js滚轮换切屏的相关文章

JS 滚轮事件 滚屏效果

浏览器差异:firefox滚轮事件是DOMMouseScroll,其他浏览器使用的是mousewheel firefox事件的event对象使用detail值表示滚轮反向,(-3)表示向上,(3)表示向下. 其他浏览器使用wheelDelta值表示表示滚轮方向,(120)表示向上, (-120)表示向下. 监听事件,删除监听事件:IE678使用attachEvent/detachEvent, 其他浏览器使用addEventListener/removeEventListener. 有Kissy版

Hammer.js移动端触屏框架的使用

hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.touchend事件并且写一大堆判断逻辑的痛苦.hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试.这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档. 使用方法: 1 2 3 4 5 6 7 8

zepto.js swipe实现触屏tab菜单

今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功能.前几天,有朋友告诉我百度基于zepto.js做了一个webapp的UI,大家也可以看下:“http://gmu.baidu.com/”,有点像jquery ui的东西,大家有兴趣可以学习啊... 我们今天,用zepto.js的swipe来实现新浪手机网的tab菜单,大家可以先看下新浪的手机版“h

用html5 js实现浏览器全屏

项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持 全屏 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var docElm = document.documentElement; //W3C  if (docElm.re

关于LCD的分屏与切屏 Tearing effect

详细文档(带图片):http://download.csdn.net/detail/xuehui869/5268852 1.LCM之Fmark功能 http://blog.csdn.net/zhandoushi1982/article/details/6011241 最近调试R61509V这颗LCM驱动芯片时,出现在纯色测试画面下画面刷新有残留(tearing effect,即TE)的问题.根本原因是主控写图像数据的速度与LCM刷屏的速度不一致造成的,具体是刷屏速度要快于主控写速度.好在很多LC

JS滚轮组件

// 滚轮组件 function wheelFn(obj,wheel_fn){ if( window.navigator.userAgent.toLowerCase().indexOf('firefox')!==-1){ obj.addEventListener('DOMMouseScroll',fn,false); }else{ obj.onmousewheel=fn; }; function fn(ev){ var oEvent=ev||event; if(oEvent.wheelDelta

iOS 切屏方法

点击要切屏时点用此方法获取图片 image 极为切屏图片 - (UIImage *)captureImageFromView:(UIView *)view { CGRect screenRect = [view bounds]; UIGraphicsBeginImageContext(screenRect.size); CGContextRef ctx = UIGraphicsGetCurrentContext(); [view.layer renderInContext:ctx]; UIIma

[JavaScript] 用html5 js实现浏览器全屏

项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有google chrome 15 +,safri5.1+,firfox10+,IE11支持 全屏: var docElm = document.documentElement; //W3C   if (docElm.requestFullscreen) {       docElm.requestFu

Js广告_全屏漂浮广告

<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Js广告_全屏漂浮广告</title> <style type="text/css"> div#roll{wid