手风琴

作者: lucky_yao | 来源:发表于2020-10-22 07:49 被阅读0次

致克劳德的探戈
手风琴指法详解及示例
手风琴手指扩展训练
佛山市手风琴协会手风琴学习班开班
jQuery中判断样式存在的方法总结
手风琴
手风琴左手键钮音位及指法详尽资料
手风琴与小提琴
手风琴折叠菜单 icon：哪个效果最好
手风琴啊手风琴

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                width: 1000px;
                height: 500px;
                border: 1px solid red;
                margin:  auto;
            }
            li{
                list-style: none;
                width: 198px;
                height: 498px;
                background: blue;
                border:1px solid yellow ;
                float: left;
                font-size: 100px;
                text-align: center;
                color: #fff;
                transition: 1s;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    <script type="text/javascript">
        var oul=document.getElementsByTagName('ul')[0];
        var oli=document.getElementsByTagName('li');
        //外面循环所有的li是给他们都绑定同一个移入事件
        for(var i=0; i<oli.length; i++){
            oli[i].style.backgroundImage='url(images/'+i+'.jpg)'
            oli[i].onmouseover=function(){
                //里面的循环是循环所有的li，把宽变成98像素大小
                for(var j=0; j<oli.length; j++){
                    oli[j].style.width=98+'px';
                }
                //当前li元素的大小是598像素
                this.style.width=598+'px';
            }
        }
        oul.onmouseout=function(){
            for(var j=0; j<oli.length; j++){
                oli[j].style.width=198+'px';
            }
        }
    </script>
</html>