欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js手风琴

程序员文章站 2022-03-11 18:13:04
...

手风琴

具体代码

<!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>

效果图
js手风琴