javascrip动画之楼层跳跃

最新推荐文章于 2021-09-07 15:14:20 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2021-09-07 15:14:20 发布

阅读量315

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/echokkk/article/details/78917555

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>楼层跳跃</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		html,body,.lc,#content {
			width: 100%;
			height: 100%;
		}
		#content li {
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 300px;
			font-size: 30px;
			font-weight: 700;
		}
		#floor {
			position: fixed;
			left: 20px;
			top: 50%;
			transform: translateY(-50%);
			display: none;
		}
		#floor li {
			width: 40px;
			height: 40px;
			border: 1px solid #000;
			font-size: 16px;
			line-height: 40px;
			text-align: center;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="lc">
		<ul id="content">
			<li>鞋子</li>
			<li>袜子</li>
			<li>帽子</li>
			<li>裤子</li>
			<li>上衣</li>
		</ul>
		<ul id="floor">
			<li>鞋子</li>
			<li>袜子</li>
			<li>帽子</li>
			<li>裤子</li>
			<li>上衣</li>
		</ul>
	</div>
	<script type="text/javascript">
		var content = document.getElementById("content");
		var floor = document.getElementById("floor");
		var color = ["red","yellow","blue","pink","orange"];
		var liHeight = content.children[0].offsetHeight;
		var timer = null;
		var leader = 0;
		var target  = 0;
		for(var i = 0 ; i < content.children.length ; i++ ){
			content.children[i].style.background = color[i];
			floor.children[i].style.background = color[i];
		}
		window.onscroll = function(){
			if(document.documentElement.scrollTop >= liHeight){
				floor.style.display = "block";
			}else{
				floor.style.display = "none";
			};
			// 首先获取当前的位置，然后在触发点击事件的时候，会重新计算当前位置
			leader = document.documentElement.scrollTop;
			for(var i = 0 ; i < content.children.length ; i++ ){
				floor.children[i].index = i;
				floor.children[i].onclick = function(){
					// 注意：索引值的获取要在定时器外面，否则得到的是NAN
					var numindex = this.index;
					// 使用定时器要先清除定时器
					clearInterval(timer);
					timer = setInterval(function(){
						// 获取目标位置
						target = numindex*liHeight;
						var speed = target > leader ? Math.ceil((target - leader)/10) : Math.floor((target - leader)/10);
						// 注意：leader计算时一定不要带单位，因为下面还会用到
						leader = leader + speed;
						window.scrollTo(0,leader);
						if(Math.abs(target -leader) <= Math.abs(speed)){
							clearInterval(timer);
						};
					},30);
				};
			};
		};
	</script>
</body>
</html>

背着吉他的蝙蝠女侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascrip动画之楼层跳跃

demo代码如下：楼层跳跃 * { margin: 0; padding: 0; list-style: none; } html,body,.lc,#content { width: 100%; height: 100%; } #content li { width: 100%; height: 100%;
复制链接

扫一扫

专栏目录