展开动画图原生js版

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 1200px;
				height: 400px;
				margin:50px auto;
				overflow: hidden;
			}
			ul{
				list-style: none;
			}
			div li{
				width: 240px;
				height: 400px;
				float: left;
			}
			div ul{
				width: 1300px;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script src="jquery1.0.0.1.js"></script>
		<script>
			window.onload=function(){
				var div=document.getElementsByTagName("div")[0];
				var liArr=div.getElementsByTagName("li");
				for(var i=0;i<liArr.length;i++){
					liArr[i].style.background="url(images/"+(i+1)+".jpg) no-repeat";
					liArr[i].onmouseover=function(){
						for(var j=0;j<liArr.length;j++){
							animate(liArr[j],{"width":0});
						}
						animate(this,{"width":1300});
					}
				}
				
				//鼠标移开
				div.onmouseout=function(){
					for(var j=0;j<liArr.length;j++){
						animate(liArr[j],{"width":240});
					}
				}
			}
		</script>
	</body>
</html>

js接上篇框架

发布了224 篇原创文章 · 获赞 63 · 访问量 7万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览