手风琴

最新推荐文章于 2022-06-13 15:02:32 发布

LW0512

最新推荐文章于 2022-06-13 15:02:32 发布

阅读量138

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108910429

版权

js 专栏收录该内容

19 篇文章

订阅专栏

手风琴

效果图

在这里插入图片描述

具体代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#oul{
				list-style: none;
				width: 1000px;
				height: 600px;
				border: 1px solid red;
				margin: 300px auto;
			}
			li{
				width: 198px;
				height: 598px;
				border: 1px solid yellow;
				float: left;
				overflow: hidden;
				transition: 1s;
			}
			
		</style>
	</head>
	<body>
		<ul id="oul">
			<li><img src="images/1.jpg"/></li>
			<li><img src="images/2.jpg"/></li>
			<li><img src="images/3.jpg"/></li>
			<li><img src="images/4.jpg"/></li>
			<li><img src="images/5.jpg"/></li>
		</ul>
	</body>
	<script type="text/javascript">
	//手风琴思路
	//移入图片，让该图片变大，其他图片变小
	//移出图片，所有图片恢复成原来的宽
		var olist=document.getElementById('oul');
		var oli=olist.getElementsByTagName('li');
		for(var i=0; i<oli.length; i++){
			oli[i].index=i;
			oli[i].onmouseover=function(){
				for(var j=0; j<oli.length; j++){
					oli[j].style.width=98+'px';
				}
				oli[this.index].style.width=598+'px';
			}
		}
		olist.onmouseout=function(){
			for(var j=0; j<oli.length; j++){
				oli[j].style.width=198+'px';
			}	
		}
	</script>
</html>