滑动门特效

最新推荐文章于 2022-06-19 22:31:28 发布

muzi187

最新推荐文章于 2022-06-19 22:31:28 发布

阅读量381

点赞数

分类专栏： html jQuery 文章标签： HTML jQuery

本文链接：https://blog.csdn.net/muzi187/article/details/79409204

版权

html 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

jQuery

22 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>sliding doors</title>
	<link rel="stylesheet" href="styles/reset.css"/>
	<link rel="stylesheet" href="styles/slidingdoors.css"/>
	<script src="scripts/slidingdoors.js"></script>
</head>
<body>

<div id="container">
	<img src="images/door1.png" alt="1080P神器" title="1080P神器" />
	<img src="images/door2.png" alt="5.5寸四核" title="5.5寸四核" />
	<img src="images/door3.png" alt="四核5寸" title="四核5寸" />
	<img src="images/door4.png" alt="5.7寸机皇" title="5.7寸机皇" />
</div>

</body>
</html>

reset.css

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

slidingdoors.css

#container{
	height:477px;
	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;
}

slidingdoors.js

window.οnlοad=function(){
	//容器对象
	var box = document.getElementById('container');
	//获得图片NodeList对象集合
	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].οnmοuseοver=function(){
				//先将每道门复位
				setImgsPos();
				//打开门
				for(var j=1;j<=i;j++){
					imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+'px';
				}
			};
		})(i);
	}
};

muzi187

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滑动门特效

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;sliding doors&lt;/title&gt; &lt;link rel="stylesheet" href="styles
复制链接

扫一扫

专栏目录