网页电梯导航以及鼠标滚动触发跳楼

最新推荐文章于 2023-11-13 23:42:54 发布

dengzong3162

最新推荐文章于 2023-11-13 23:42:54 发布

阅读量105

点赞数

原文链接：http://www.cnblogs.com/alasq/p/6045675.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.3.js"></script>
    <style>
        html{overflow-y: hidden}
        *{padding: 0;
            margin: 0;}
        div{height:672px;}
        div:nth-child(1){background: #128;}
        div:nth-child(2){background: #152;}
        div:nth-child(3){background: #194;}
        div:nth-child(4){background: #166;}
        div:nth-child(5){background: #576;}
        div:nth-child(6){background: #428;}
        div:nth-child(7){background: #784;}

        ul{position: fixed;top:50%;right:0;list-style: none;}
        ul>li{width: 50px;height:50px;
            border: 1px solid #555;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            background-color: #119944;}
    </style>
</head>
<body>
<div id="d1"><h1>这是第一屏</h1></div>
<div id="d2"><h1>这是第二屏</h1></div>
<div id="d3"><h1>这是第三屏</h1></div>
<div id="d4"><h1>这是第四屏</h1></div>
<div id="d5"><h1>这是第5屏</h1></div>
<div id="d6"><h1>这是第6屏</h1></div>
<div id="d7"><h1>这是第7屏</h1></div>
<ul>
    <li data-target="d1">一屏</li>
    <li data-target="d2">二屏</li>
    <li data-target="d3">三屏</li>
    <li data-target="d4">四屏</li>
</ul>
<script>
    var h1=$("#d1").offset().top;
    var h2=$("#d2").offset().top;
    var h3=$("#d3").offset().top;
    var h4=$("#d4").offset().top;
    var flag=false;
document.addEventListener("mousewheel", function (e) {

    if(flag) return;
    flag=true;
    var change=0;
    var screenHeight=$(window).height();
    console.log(screenHeight);
    change=e.deltaY>0?screenHeight:-screenHeight;
    var h=$(document.body).scrollTop()+change;
    $(document.body).animate({scrollTop:h},500, function () {
        flag=false;
    });
});

$("[data-target='d1']").click(function () {
    $(document.body).animate({scrollTop:h1},500);
});
$("[data-target='d2']").click(function () {
    $(document.body).animate({scrollTop:h2},500);
});
$("[data-target='d3']").click(function () {
    $(document.body).animate({scrollTop:h3},500);
});
$("[data-target='d4']").click(function () {
    $(document.body).animate({scrollTop:h4},500);
});
</script>
</body>
</html>

转载于:https://www.cnblogs.com/alasq/p/6045675.html

dengzong3162

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页电梯导航以及鼠标滚动触发跳楼

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.3.js"></script> &lt...
复制链接

扫一扫