运用onmousewheel事件写的幻灯片demo

最新推荐文章于 2023-03-08 11:52:46 发布

wanminchi

最新推荐文章于 2023-03-08 11:52:46 发布

阅读量554

点赞数

分类专栏： javascript 文章标签： javascrpit mousewheel

本文链接：https://blog.csdn.net/alamango/article/details/43834839

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用鼠标的滚轮的可以便利了浏览网页，但是当使用滚轮作为控制器时，做一些网页幻灯片形式的展示时，我们要对鼠标的滚轮事件做一些自定义的调整。废话不多说先放上代码
（本段代码只在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;}

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

wanminchi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运用onmousewheel事件写的幻灯片demo

使用鼠标的滚轮的可以便利了浏览网页，但是当使用滚轮作为控制器时，做一些网页幻灯片形式的展示时，我们要对鼠标的滚轮事件做一些自定义的调整。废话不多说先放上代码（本段代码只在chrome跑过）<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>幻灯片</title> <style> htm
复制链接

扫一扫