展开动画图原生js版

最新推荐文章于 2022-10-12 14:11:46 发布

zuo_zuo_blog

最新推荐文章于 2022-10-12 14:11:46 发布

阅读量182

点赞数

分类专栏：轮播原生

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/104007144

版权

轮播原生专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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接上篇框架