滑块门效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42166007/article/details/96620647

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>滑块门</title>
		<link rel="stylesheet" type="text/css" href="css/silder.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<script src="js/slider.js"></script>
	</head>
	<body>
		<div id="container">
			<img src="img/img1.png" alt="第一张图片" title="第一张图片" />
			<img src="img/img2.png" alt="第二张图片" title="第二张图片" />
			<img src="img/img3.png" alt="第三张图片" title="第三张图片" />
			<img src="img/img4.png" alt="第四张图片" title="第四张图片" />
		</div>
	</body>
</html>

Css：

（1）reset.css

/*
KISSY CSS Reset
理念：清除和重置是紧密不可分的
特色：1.适应中文 2.基于最新主流浏览器
*/

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}

/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
    border-bottom: 1px dotted;
    cursor: help;
}

q:before, q:after { content: ''; }

/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

（2）slider.css

#container{
	margin: 0 auto;
	height: 500px;
	border-right: solid 1px #CCCCCC;
	border-bottom: solid 1px #CCCCCC;
	overflow: hidden;
	position: relative;
}
#container img{
	position: absolute;
	display: block;
	left: 0;
	border-left: solid 1px #CCCCCC;
}

Js:

//页面加载完毕再执行
window.onload = function(){
	//获取容器对象
	var box = document.getElementById('container');
    //var box = document.getElementsByClassName('container')[0]; 因为classname获取的是集合，不是单个元素
	//获取图片对象集合
	var imgs = document.getElementsByTagName('img');
	//获取单张图片宽度
	var imgWidth = imgs[0].offsetWidth;
	//设置掩藏门体显示的宽度
	var showWidth = 180;
	//设置容器总宽度
	var boxWidth = imgWidth + (imgs.length - 1) * showWidth;
	box.style.width = boxWidth + 'px';
	//设置每道门的初始位置
	function beginPos(){
	for(var i = 1,len = imgs.length;i < len;i++){
		imgs[i].style.left = imgWidth + (i-1) * showWidth + 'px';
	}
	};
	beginPos();
    //计算每道门打开时应移动的距离
    var moveWidth = imgWidth - showWidth;
    //为每道门绑定事件
    for(var i=0,len = imgs.length;i < len;i++){
		//使用立即调用的函数表达式，为了获得不同的i值
		(function(i){
			imgs[i].onmouseover = function(){
				//先将每道门复位
				beginPos();
				for(var j = 1;j <= i;j++){
				//打开门
				imgs[j].style.left = parseInt(imgs[j].style.left,10) - moveWidth + 'px';
			}
			}	
		})(i);		
	}		
};