JS实现简单的滑动门

最新推荐文章于 2021-09-12 19:09:58 发布

DOM曼珠沙华

最新推荐文章于 2021-09-12 19:09:58 发布

阅读量414

点赞数 1

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/a18792627168/article/details/106320370

版权

javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

这个是为了体验DOM操作的过程实现的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滑动门</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#container{
				height: 275px;
				margin: 0 auto;
				border-right: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				overflow: hidden;
				position: relative;
			}
			#container img{
				position: absolute;
				display: block;
				left:0;
				border-left: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<img src="../img/0.png" alt="图0"  title="图0"/>
			<img src="../img/1.png" alt="图1"  title="图1"/>
			<img src="../img/2.png" alt="图2"  title="图2"/>
			<img src="../img/3.png" alt="图3"  title="图3"/>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById('container');
				var imgs = box.getElementsByTagName('img');
				// 单张 图片的宽度
				var imgWidth = imgs[0].offsetWidth;
				//设置掩藏门体露出的宽度
				var exposeWidth = 160;
				// 设置容器总宽度
				var boxWidth = imgWidth + (imgs.length - 1)*exposeWidth;
				box.style.width = boxWidth + 'px';
				
				// 设置每道门的初始位置
				function setImgsPos(){
					for(var i = 1,len = imgs.length;i< len; i++){
						imgs[i].style.left = imgWidth + exposeWidth*(i-1)+'px';
					}
				}
				setImgsPos();
				
				// 计算每道门打开时移动的距离
				var translate = imgWidth - exposeWidth;
				
				// 为每道门绑定事件
				for(var i = 0, len = imgs.length;i < len ;i++){
					//使用立即调用的函数表达式，为了获得不同的i值
					(function(i){
						imgs[i].onmouseover = function(){
							//为每道门复位
							setImgsPos();
							//打开门
							for(var j = 1;j <= i; j++){
								imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px';
							}
						}
					})(i);
				}
			}
		</script>
	</body>
</html>

实现结果：

滑动前：