无滚动条切屏
程序员文章站
2022-04-18 18:36:15
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>滑动玻璃窗效果</title>
<link rel="stylesheet" href="">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
/*初始化，设置边距全部为0*/
*{margin: 0;padding: 0;font-size: 62.5%;}
/*设置视窗不显示滚动条*/
html {
-ms-overflow-style:none;
overflow:-moz-scrollbars-none;
}
html::-webkit-scrollbar{width:0px}
.content{
width: auto;
}
.title{
position: fixed;
width: 300px;
height: auto;
/*border: 1px solid red;*/
top: 28px;
left: 108px;
}
.title p{
display: block;
font-size: 28px;
color: #fff;
font-family: "微软雅黑";
}
.container{
width: 100%;
background-repeat: no-repeat;
background-size: contain;
}
img{
width: 100%;
height: 100%;
}
.select{
width: auto;
height: auto;
list-style: none;
position: fixed;
top: 35%;
left: 3%;
}
.select ul li{
display: block;
width: 14px;
height: 14px;
border: 1px solid #fff;
border-radius: 50%;
margin-top: 10px;
cursor:pointer;
}
.select ul li.on{
background-color: #fff;
}
</style>
</head>
<body>
<div class="title"><p>这就是个标题，没事</p></div>
<div class="content">
<div class="container"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507722435030&di=b77cd7b284f2e19274352c087f8e486b&imgtype=0&src=http%3A%2F%2Fimgstore.cdn.sogou.com%2Fapp%2Fa%2F100540002%2F455377.jpg" alt=""></div>
<div class="container"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507722518086&di=9e1bdb37b57c68de5964794c0973a1a6&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1924%2Fntk-1924-20355.jpg" alt=""></div>
<div class="container"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507722518085&di=a62772dc719b97d36490e6c07c60b7d5&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1420%2Fntk-1420-17603.jpg" alt=""></div>
<div class="container"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507722518084&di=35559b280e396f791cf40e140d755642&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2F1312%2F0823%2F0823-niutuku.com-28127.jpg" alt=""></div>
<div class="container"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507722518082&di=8c6722e47fa334d00e0d6c4f2eb34445&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1956%2Fntk-1956-32474.jpg" alt=""></div>
</div>
<div class="select">
<ul>
<li class="on"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ul>
</div>
<script>
var index = 0;
var height = $(window).height();//获取窗口的高度
$(".container").css("height",height);//设置图片的高度等于窗口的高度
$(".content").css("height",height);
$(".select ul li").click(function(){
$(this).addClass('on').siblings('li').removeClass('on');
index = $(this).index();
$('html,body').animate({scrollTop:index*height+'px'},1000);
});
setTimeout(function(){
$(document).scrollTop(0);
},50)
</script>
</body>
</html>
上一篇： 百度移动：静悄悄的战争