原生滚屏

最新推荐文章于 2022-09-25 18:08:05 发布

静心物语

最新推荐文章于 2022-09-25 18:08:05 发布

阅读量205

点赞数

文章标签： scroll

本文链接：https://blog.csdn.net/qq_36293849/article/details/52915845

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
/*overflow: hidden;*/
}
.menu{
z-index: 10;
position: fixed;
top: 10px;
left: 50%;
transform: translate(-50%);
width:300px;
height: 30px;
}
.menu div{
float: left;
margin-left: 25px;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
}
.active{
background: green;
}
.content{
position: relative;
top: 0;
width: 100%;
height: 400%;
}
.content div{

width: 100%;
height: 25%;
font-size: 50px;
text-align: center;
}
.content div i{
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content div:nth-of-type(1){
background: orange;
}
.content div:nth-of-type(2){
background: deepskyblue;
}
.content div:nth-of-type(3){
background: greenyellow;
}
.content div:nth-of-type(4){
background: pink;
}
</style>
</head>
<body>
<div class="menu">
<div class="active">按钮一</div>
<div>按钮二</div>
<div>按钮三</div>
<div>按钮四</div>
</div>
<div class="content">
<div><i></i>内容一</div>
<div><i></i>内容二</div>
<div><i></i>内容三</div>
<div><i></i>内容四</div>
</div>
</body>
<script src="jquery-3.0.0.min.js"></script>
<script>
var num = 0;
var finish = true;
var H = $(window).innerHeight();
// jquery 兼容的滚轮事件
$(document).on("mousewheel DOMMouseScroll", function (e) {
console.log(e)
if (finish) {
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
if (delta > 0) {
// 向上滚
num--;
if (num<0) num=0;
move();
// console.log(num);
} else if (delta < 0) {
// 向下滚
num++;
if (num>3) num=3;
move();
}
}

});
// menu 点击事件
$('.menu div').each(function() {
$(this).click(function() {
num = $(this).index();
$(this).addClass('active').siblings().removeClass('active');//添加active 改变颜色
$('.content').animate({top:-H*num});
});
});
// 滚动动画
function move(){
finish = false;
$('.content').stop().animate({top:-H*num}, "slow",function(){finish=true});
$('.menu div').removeClass('active').eq(num).addClass('active');
console.log(H);
}
$(window).resize(function(){
H=$(window).innerHeight();
$(".content").css({top:-H*num});
});
</script>
</html>

静心物语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生滚屏

demo1*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;/*overflow: hidden;*/}.menu{z-index: 10;position: fixed;top: 10px;left: 50%;transform: translate(-50%);
复制链接

扫一扫