运用onmousewheel事件 写的幻灯片demo

使用鼠标的滚轮的可以便利了浏览网页,但是当使用滚轮作为控制器时,做一些网页幻灯片形式的展示时,我们要对鼠标的滚轮事件做一些自定义的调整。废话不多说先放上代码
(本段代码只在chrome跑过)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>幻灯片</title>
    <style>
        html,body{margin:0px;padding:0px;position:relative;}
        body{margin:0px;padding:0px;overflow:hidden;position:relative;}
        #box{position:absolute;top:0px;left:0px;z-index: -1;-webkit-transition-duration: 1s;}

        #b{position:absolute;right:30px;top:300px;z-index:10;}
        .cricle{height:10px;width:10px;border-radius: 5px;border:1px solid black;margin:10px 0px 10px 0px;}
        #c{width:12px;height:12px;border-radius: 5px;background-color: black;position:absolute;top:10px;left:0px;-webkit-transition-duration: 1s;}
        .d{position: relative;}
    </style>
    <script type="text/javascript">
    window.onload = function(){ 
        document.getElementsByTagName("body")[0].style.width = window.innerWidth + 'px';
        document.getElementsByTagName("body")[0].style.height = window.innerHeight + 'px';
        var a = document.getElementsByClassName("a");
        var i = 0;
        while(a[i]){ 
            a[i].style.width = window.innerWidth + 'px';
            a[i].style.height = window.innerHeight + 'px';

            i++;
        }
        function gundong(ev){ 
            console.log("运行gundong");
            var ev = ev || window.event;
            console.log(ev.wheelDelta);
            console.log(document.getElementById("box").style.top);
            if(ev.wheelDelta < 0 && parseInt(document.getElementById("box").style.top) >= - window.innerHeight * 3){ 
                console.log("向下");
                document.getElementById("box").style.top = parseInt(document.getElementById("box").style.top) - window.innerHeight + 'px';
                console.log(document.getElementById("box").style.top);
                document.getElementById("c").style.top = parseInt(document.getElementById("c").style.top) + 22 +'px';
            }
            if(ev.wheelDelta > 0 && parseInt(document.getElementById("box").style.top) < 0){ 
                console.log("向上");
                document.getElementById("box").style.top = parseInt(document.getElementById("box").style.top) + window.innerHeight + 'px';
                document.getElementById("c").style.top = parseInt(document.getElementById("c").style.top) - 22 +'px';

            }
            window.onmousewheel = document.onmousewheel = function(){console.log("消除功能");};
            window.setTimeout(function(){window.onmousewheel = document.onmousewheel = gundong;},800);
        }
        window.onmousewheel = document.onmousewheel = gundong;
    }
    </script>
</head>
<body>
<div id="box" style="top:0px;">
    <div class="a" style="background-color:green"></div>
    <div class="a" style="background-color:red"></div>
    <div class="a" style="background-color:blue"></div>
    <div class="a" style="background-color:gray"></div>
    <div class="a" style="background-color:yellow"></div>
</div>
    <div id="b">
    <div id="d">
        <div class="cricle"></div>
        <div class="cricle"></div>
        <div class="cricle"></div>
        <div class="cricle"></div>
        <div class="cricle"></div>
        <div id="c" style="top:10px;"></div>
    </div>
    </div>
</body>
</html>

这里我们重新定义了事件onmousewheel。
其中我通过HTML DOM方式添加事件,

window.onmousewheel = document.onmousewheel = gundong;

当然由于FireFox在mousewheel事件上与其他浏览的不同,可以通过一下方式对不同浏览器进行通配

if(document.addEventListener){ 
document.addEventListener('DOMMouseScroll',gundong,false); 
}
window.onmousewheel = document.onmousewheel = gundong; 

接下来我们重点分析 自定义函数gundong()。(代码里出现的console.log(……);只是为了测试不同代码的执行情况)。

onmousewheel中一个重要的属性 wheelDelta 这是判断 不同的滚动的方向,虽然在不同的浏览器中,该属性的值不同,但是一致的是相同方向上 其返回的值 的正负性相同。
利用这一性质,我们可以开始写不同的情况

if(ev.wheelDelta < 0 && parseInt(document.getElementById("box").style.top) >= - window.innerHeight * 3){ 
                console.log("向下");
                document.getElementById("box").style.top = parseInt(document.getElementById("box").style.top) - window.innerHeight + 'px';
                console.log(document.getElementById("box").style.top);
                document.getElementById("c").style.top = parseInt(document.getElementById("c").style.top) + 22 +'px';
            }

向下滚的条件,1.wheelDelta值小于0,2.页面不超出一定滚动范围
满足条件,则页面向下移一个屏幕高度的位置,即移一个页面。
向上的滚的条件事件 同上。细节略有变化。

接下来是增加用户体验的一个效果

window.onmousewheel = document.onmousewheel = function(){console.log("消除功能");};
window.setTimeout(function(){window.onmousewheel = document.onmousewheel = gundong;},800);

用户滚动齿轮的一个齿就执行一次上面的代码,这样稍动一下滚轮就会出现移动完所有的页面的情况,所以在执行完一次 一次翻页,就注销当前的事件的功能,并设定一个时间重新获得功能,来实现,不管用户滚多少齿轮,一次只翻一页的效果。

读者可以将该片段代码从其中删除,来对比体会一下。

实现上面代码的一些css样式还要有些注意的地方

body{overflow:hidden;}
#box{-webkit-transition-duration: 1s;}

消除了 页面的滚动条,让其页面的滚动完全自定义
加入滚动时的动画过渡效果

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值