简单的界面切换（无滚动条）

最新推荐文章于 2024-08-30 20:29:15 发布

choudangxie6852

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量155

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2244313/blog/1549286

版权

<!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>

转载于:https://my.oschina.net/u/2244313/blog/1549286

choudangxie6852

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的界面切换（无滚动条）

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <tit...
复制链接

扫一扫