手风琴效果

最新推荐文章于 2023-02-06 11:22:49 发布

小森呀

最新推荐文章于 2023-02-06 11:22:49 发布

阅读量1.7k

点赞数

分类专栏：封装文章标签：原生js 手风琴

本文链接：https://blog.csdn.net/KEY2018/article/details/94148368

版权

封装专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>手风琴</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.bg{
				width: 880px;
				height: 500px;
				border: 1px solid black;
				margin: 200px auto;
			}
			.bg div{
				width: 200px;
				height: 500px;
				float: left;
				overflow: hidden;
				transition: all 1s;
				margin: 0px 10px;
			}
			.bg .cur{
				width:500px;
				height: 500px;
			}
			.bg .mv{
				width: 100px;
				height: 500px;
			}
			/*如果div中放的是图片的话，需要将图片的宽和高设置为他所在div完全展开时的宽和高*/
		</style>
	</head>
	<body>
		<div class="bg">
			<div style="background-color: lightblue;"></div>
			<div style="background-color: lightcoral;"></div>
			<div style="background-color: lightgreen;"></div>
			<div style="background-color: darkgoldenrod;"></div>
		</div>
	</body>
	<script type="text/javascript">
		var div=document.querySelectorAll('.bg div');
		for(var x=0;x<div.length;x++)
		{
			div[x].onmouseover=function()//鼠标经过事件
			{
					for(var y=0;y<div.length;y++)
				    {
					div[y].className='';
				    }
				    this.className='cur';
				    var he=siblings(this,div);//除原列表中鼠标经过的div以外的其他所有div的新列表
				    for(var z=0;z<he.length;z++)
				    {
				    	he[z].className='mv';
				    }
			}
			div[x].onmouseout=function()//鼠标离开事件
			{
				for(var y=0;y<div.length;y++)
				    {
					div[y].className='';
				    }
			}
		}
		//获取某个元素所在的类元素数组中除此元素之外的其它所有的元素的类元素数组
		function siblings(cur,list)//第一个形参为需要排除的元素，第二个形参为需要排除的元素原先所在的类元素数组
		{
			var ga=[];//创建一个新数组
			for(var x=0;x<list.length;x++)//将原数组中的元素都遍历出来
			{
				if(list[x]!==cur)//判断原数组中是否含有此元素
				{
					ga.push(list[x])//将不含有排除元素的其他元素都放入新建的数组中
				}
			}
			return ga;
		}
	</script>
</html>

小森呀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
手风琴效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>手风琴</title> <style type="text/css"> *{ margin: 0; padding: 0; } .bg{ ...
复制链接

扫一扫