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