tx4-手风琴效果

来源：互联网发布：qt编程实现漂亮界面编辑：程序博客网时间：2024/05/21 15:04

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>

0 0