慕课网 — Dom滑动门效果

最新推荐文章于 2021-03-09 10:58:42 发布

Mr_chen的python学习日常

最新推荐文章于 2021-03-09 10:58:42 发布

阅读量224

点赞数

分类专栏： imooc 文章标签：慕课网滑动门

imooc 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>滑动门特效</title>
		<link rel="stylesheet" type="text/css" href="css/huadongm.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<script src="js/sll.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="contia">
			<img src="img/door1.png" alt="滑动门1" title="滑动门1"/>
			<img src="img/door2.png" alt="滑动门2" title="滑动门2"/>
			<img src="img/door3.png" alt="滑动门3" title="滑动门3"/>
			<img src="img/door4.png" alt="滑动门4" title="滑动门4"/>
		</div>
	</body>
</html>

统一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;
}

盒子的css样式

#contia{
	height: 477px;
	margin:  0 auto;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #CCC;
	overflow: hidden;
	position: relative;	
}
#contia img {
	position: absolute;	 
	display: block;
	left: 0;
	border-left:1px solid #ccc ; 
}

javascript特效

window.onload = function(){  //window.onload 等所有window元素加载完执行的
 	//获取容器对象
 	var box = document.getElementById("contia");
 	
 	//获取图像Nodelist
 	var imgs = box.getElementsByTagName("img");
 	
 	//单张图片宽度
 	var imgWidth = imgs[0].offsetWidth;//offsetWidth 属于dom设置的样式内容
 	
 	//设置隐场门宽度
 	var exposeWidth = 160;
 	
 	//设置容器总宽度
 	var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;
 	box.style.width = boxWidth + "px";
 	//style 属于dom设置属性内容
 	
 	//设置每道门的初始位置
 	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);
 		
 	}
 	
};

Mr_chen的python学习日常

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
慕课网 — Dom滑动门效果

html代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;滑动门特效&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href=&q
复制链接

扫一扫