jq-鼠标滚轮事件

最新推荐文章于 2024-07-30 03:35:30 发布

Hi，dsl

最新推荐文章于 2024-07-30 03:35:30 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/hidsl/article/details/106571119

本文介绍了如何使用jQuery监听并处理鼠标滚轮事件。首先，通过设置html和body的高度为100%，并隐藏默认滚动条，然后引入jQuery库，为页面添加滚轮事件的响应功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、给html，body设置高度100%，overflow设置hidden，隐藏右边滚动条

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    overflow: hidden;//隐藏右侧滚动条
    position: relative;

}
.container{
    height: 100%;
    width: 100%;
    transition: all .5s;//过渡
}
.container .item{
    height: 100%;
}
 ul {
    z-index: 1000;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);//当定位为50%时。transform减去高度的一半，就可以使盒子居中

}
.indexes li{
    list-style: none; 
    width: 10px;
    margin: 20px;
    height: 10px;
    border-radius: 50%;//当设置成50%是回城一个圆
    background-color: azure;
}
.indexes li.active{
    background: red;
}
.left-nav{
    list-style: none;
    z-index: 1000;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.left-nav li{
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    background-color: black;
}
.left-nav li.on{
    background-color: red;
}

<div class="container">
        <div class="item" style="background-color: rgb(252, 199, 130);">
        </div>
        <div class="item" style="background-color: rgb(189, 235, 152);">
        </div>
        <div class="item" style="background-color: rgb(149, 210, 250);">
        </div>
        <div class="item" style="background-color: rgb(232, 106, 236);">
        </div>
        <div class="item" style="background-color: rgb(247, 107, 114);">
        </div>

    </div>
   
    <ul class="indexes">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <ul class="left-nav">
        <li class="on">AA</li>
        <li>BB</li>
        <li>CC</li>
        <li>DD</li>
        <li>EE</li>
    </ul>

2、引入jq库

   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$(function(){
//设置一个全局变量值
    let i = 0
function move(e){
 //鼠标滚轮事件，当wheelDelta的值小于0时，鼠标向下滚动
 //当wheelDelta的值大于0时，鼠标向上滚动
 //做一个判断，当鼠标向下滚动时，i+1，反之，i-1
    if (e.wheelDelta<0) {
        if (i===$(".item").length-1) return
        i++
    }else{
        if (i===0) return 
        i--
    }
    //将i值乘以屏幕宽度，向上滚动
$('.container').css('transform',`translateY(-${100*i}vh)`)
//找到全部li当下标等于i值是增加active，其余兄弟元素清除active
$(".indexes li").eq(i).addClass("active").siblings().removeClass("active")
$(".left-nav li").eq(i).addClass("on").siblings().removeClass("on")
}
//鼠标滚动事件
window.onmousewheel=move

})
//当鼠标经过时右侧进度条时，滚动到对应的页面相关内容
$("indexes li").hover(function(){
    let index = $(this).index()
    $('.container').css('transform',`translateY(-${100*index}vh)`)
$(".indexes li").eq(index).addClass("active").siblings().removeClass("active")
$(".left-nav li").eq(index).addClass("on").siblings().removeClass("on")
})
//当点击左侧导航栏是，相同的滚动到相对应的页面
$(".left-nav li").click(function(){
    let index = $(this).index()
    $('.container').css('transform',`translateY(-${100*index}vh)`)
$(".left-nav li").eq(index).addClass("on").siblings().removeClass("on")
$(".indexes li").eq(index).addClass("active").siblings().removeClass("active")
})

在这里插入图片描述