jq-鼠标滚轮事件

本文介绍了如何使用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")
})

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值