JavaScriptDOM练习之筋斗云效果

来源：互联网发布：电助力自行车知乎编辑：程序博客网时间：2024/04/30 00:00
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        * {            margin: 0;            padding: 0        }        ul {            list-style: none        }        body {            background-color: #333;        }        .nav {            width: 800px;            height: 42px;            margin: 100px auto;            background: url(images/rss.png) right center no-repeat;            background-color: #fff;            border-radius: 10px;            position: relative;        }        .nav li {            width: 83px;            height: 42px;            text-align: center;            line-height: 42px;            float: left;            cursor: pointer;        }        .nav span {            position: absolute;            top: 0;            left: 0;            width: 83px;            height: 42px;            background: url(images/cloud.gif) no-repeat;        }        ul {            position: relative;        }    </style></head><body><div class="nav">    <span id="cloud"></span>    <ul id="navBar">        <li>北京校区</li>        <li>上海校区</li>        <li>广州校区</li>        <li>深圳校区</li>        <li>武汉校区</li>        <li>关于我们</li>        <li>联系我们</li>        <li>招贤纳士</li>    </ul></div><script src="common.js"></script><script>    var list = my$("navBar").children;    for(var i=0; i<list.length; i++){        list[i].onclick = clickHandle;        list[i].onmouseover = mouseoverHandle;        list[i].onmouseout = mmouseoutHandle;    }    var index = 0;    function clickHandle() {        index = this.offsetLeft;    }    function mouseoverHandle() {        animate(my$("cloud"), this.offsetLeft);    }    function mmouseoutHandle() {        animate(my$("cloud"), index);    }</script></body></html>
阅读全文
0 0