鼠标滚轮事件:onmousewheel
js e对象参数里
jQuery e的originalEvent里
主要实现效果:仿照支付宝效果,鼠标滚轮事件,当鼠标向下滚动时,整个页面元素依次以浏览器为单位向上移动,而当鼠标向下滚动时,整个页面元素又以浏览器为单位向下滚动。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
width: 100%;
height: 100%;
object-fit:cover;
position:absolute;
overflow:hidden;
}
*{
padding:0px;
margin:0px;
}
ul{
padding:0px;
margin:0px;
width:100%;
height:100%;
}
li{
position:relative;
list-style:none;
height:100%;
padding:0;
overflow:hidden;
}
.box{
position:absolute;
bottom:40%;
width:400px;
left:35%;
text-align:center;
}
.box button{
width:150px;
height:30px;
background:transparent;
border:1px solid white;
border-radius:5px;
margin-top:20px;
}
.box button:first-of-type{
margin-right:95px;
}
.img_list{
width:100%;
display: block;
max-width: 100%;
height:100%;
}
.btn_play{
position:absolute;
right:-10%;
top:50%;
width:40px;
height:40px;
text-align:center;
line-height:40px;
border:1px white solid;
border-radius:50%;
}
.imgList{
position:absolute;
z-index:2;
transition:transform 1s linear,opacity 1s linear;
}
.imgList:first-of-type{
left:10%;
top:15%;
}
.imgList:nth-child(2){
left:62%;
}
.imgList:nth-child(3){
left:20%;
}
.imgList:nth-child(4){
left:42%;
bottom:0;
overflow: hidden;
}
.imgList:nth-child(5){
left:23%;
top:30%;
opacity:0;
}
.imgpay{
position:absolute;
transition:transform 1s linear,opacity 1s linear;
}
.imgpay:nth-child(1){
left:-10%;
top:-45%;
z-index:2;
}
.imgpay:nth-child(2){
left:30%;
bottom:-50%;
}
.imgpay:nth-child(3){
left:50%;
top:30%;
opacity:0;
}
.imgfan{
position:absolute;
left:15%;
top:20%;
z-index:2;
}
.imgfan1{
transition:transform 1s linear;
}
.imgfont{
position:absolute;
right:25%;
top:33%;
opacity:0;
z-index:2;
transition:opacity 1s linear;
}
.imgfont1,.imgp1{
transition:transform 1s linear;
}
.imgp{
position:absolute;
left:15%;
top:30%;
opacity:0;
z-index:2;
transition:opacity 2s linear;
}
.animate1{
transform:translatex(200px);
}
.animate2{
transform:translatex(28%) translatey(60%);
}
.animate3{
transform:translatex(-9%) translatey(-5%);
}
.bigFont{
transform:scale(1.1)
}
</style>
</head>
<body>
<ul class="ul_list">
<li class="li_banner">
<div class="box">
<img src="7.26/image/4JdljnmTmX.png" alt=""/>
<button>登录</button>
<button>注册</button>
<div class="btn_play">
<img src="7.26/banner/btn_play.png">
</div>
</div>
<img class="img_list" src="7.26/image/T1k5ReXXlkXXXXXXXX.jpg">
</li>
<li class="li_banner">
<img class="imgList" src="7.26/image/4JdkvPL4wX.png" alt=""/>
<img class="imgList" src="7.26/image/T10QFeXdlgXXXXXXXX.png" alt=""/>
<img class="imgList" src="7.26/image/T19AteXc4xXXXXXXXX.png" alt=""/>
<img class="imgList" src="7.26/image/T1GDtfXeRcXXXXXXXX.png"/>
<img class="imgList" src="7.26/image/4JdlKWNmB3.png"/>
<img class="img_list img_list2" src="7.26/image/T1yXVfXfddXXXXXXXX.jpg">
</li>
<li class="li_banner">
<img class="imgpay" src="7.26/image/T1zABeXkxsXXXXXXXX.png" alt=""/>
<img class="imgpay" src="7.26/image/T1PQteXadyXXXXXXXX.png" alt=""/>
<img class="imgpay" src="7.26/image/T148deXkVlXXXXXXXX.png" alt=""/>
<img class="img_list" src="7.26/image/4JdlRITPmX.jpg">
</li>
<li class="li_banner">
<img class="imgfan" src="7.26/image/T14uXfXdBXXXXXXXXX.png" alt=""/>
<img class="imgfan1 img_list" src="7.26/image/T1y3dfXfFlXXXXXXXX.jpg">
</li>
<li class="li_banner">
<img class="imgfont" src="7.26/image/T1fCVfXg0hXXXXXXXX.png" alt=""/>
<img class="imgfont1 img_list" src="7.26/image/4JdkvtFg7B.jpg">
</li>
<li class="li_banner">
<img class="imgp" src="7.26/image/4OdnkirZ89.png" alt=""/>
<img class="imgp1 img_list" src="7.26/image/4JdidBF3Kn.jpg" alt=""/>
</li>
</ul>
<script src="7.26/jquery-3.0.0.js"></script>
<script type="text/javascript">
var num=0;
var isAnimate=false;
$(function(){
$(document).bind("mousewheel",function(event){
//bind是事件的绑定(type,[data],fn)
if(event.originalEvent.deltaY>0){ //向下滚动,元素向上
if(isAnimate == false){
//这里用isAnimate主要是为了保证一次划过一个页面
isAnimate = true;
num++;
if(num>5 ){
num=5;
isAnimate = false
return;
}
$(".ul_list").animate({
"marginTop":-num *parseInt($(".li_banner").css("height"))+"px"
},500,"linear",function(){
//图片中的相应动画
isAnimate =false;
if(num==0){
$(".imgList").eq(2).removeClass("animate1");
$(".imgList").eq(4).css("opacity",0).removeClass("bigFont")
}
else if(num == 1){
$(".imgList").eq(2).addClass("animate1");
$(".imgList").eq(4).css("opacity",1).addClass("bigFont")
}else if(num == 2){
$(".imgList").eq(2).removeClass("animate1");
$(".imgList").eq(4).css("opacity",0).removeClass("bigFont")
$(".imgpay").eq(0).addClass("animate2");
$(".imgpay").eq(1).addClass("animate3");
$(".imgpay").eq(2).css("opacity",1);
}else if(num ==3){
$(".imgpay").eq(0).removeClass("animate2");
$(".imgpay").eq(1).removeClass("animate3");
$(".imgpay").eq(2).css("opacity",0);
$(".imgfan1").eq(0).addClass("bigFont");
}else if(num == 4){
$(".imgfan1").eq(0).removeClass("bigFont");
$(".imgfont1").eq(0).addClass("bigFont");
$(".imgfont").eq(0).css("opacity",1)
}else if(num == 5){
$(".imgfont1").eq(0).removeClass("bigFont");
$(".imgfont").eq(0).css("opacity",0)
$(".imgp1").eq(0).addClass("bigFont");
$(".imgp").eq(0).css("opacity",1)
}
})
}
}else{
//向上滚动,元素向下
if(isAnimate == false){
isAnimate = true;
num--;
if(num<0){
num = 0;
isAnimate= false;
return;
}
$(".ul_list").animate({
"marginTop":-num * parseInt($(".li_banner").css("height"))+"px"
},500,"linear",function(){
//执行相应动画
isAnimate = false;
if(num==0){
$(".imgList").eq(2).removeClass("animate1");
$(".imgList").eq(4).css("opacity",0).removeClass("bigFont")
}
else if(num == 1){
$(".imgpay").eq(0).removeClass("animate2");
$(".imgpay").eq(1).removeClass("animate3");
$(".imgpay").eq(2).css("opacity",0);
$(".imgList").eq(2).addClass("animate1");
$(".imgList").eq(4).css("opacity",1).addClass("bigFont")
}else if(num == 2){
$(".imgfan1").eq(0).removeClass("bigFont");
$(".imgpay").eq(0).addClass("animate2");
$(".imgpay").eq(1).addClass("animate3");
$(".imgpay").eq(2).css("opacity",1);
}else if(num ==3){
$(".imgfont1").eq(0).removeClass("bigFont");
$(".imgfont").eq(0).css("opacity",0)
$(".imgfan1").eq(0).addClass("bigFont");
}else if(num == 4){
$(".imgp1").eq(0).removeClass("bigFont");
$(".imgp").eq(0).css("opacity",0)
$(".imgfont1").eq(0).addClass("bigFont");
$(".imgfont").eq(0).css("opacity",1)
}else if(num == 5){
$(".imgp1").eq(0).addClass("bigFont");
$(".imgp").eq(0).css("opacity",1)
}
})
}
}
})
})
</script>
</body>
</html>