本文主要是介绍tx4-手风琴效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
webStrom快捷键 ctrl+shift+↑↓ 可以调整代码位置
下面的4张图片用的是300*200的
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.box{width: 600px;height: 200px;margin: 100px auto;border: 1px solid red;overflow: hidden;}.box ul{width: 900px;list-style: none;}.box ul li{width: 150px;height: 200px;border: 1px solid red;float: left;}</style>
</head>
<body><div class="box"><ul><li></li><li></li><li></li><li></li></ul></div>
</body>
</html>
<script>var box = document.getElementsByTagName("div")[0];var ul = box.children[0];var lis = ul.children;for(var i=0;i<lis.length;i++){lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";lis[i].index= i;lis[i].onmouseover = function () {for(var i=0;i<lis.length;i++){lis[i].style.width = "100px";}this.style.width = "300px";}lis[i].onmouseout = function () {for(var j=0;j<lis.length;j++){lis[j].style.width = "150px";}}}
</script>这篇关于tx4-手风琴效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
