“筋斗云”小案例

来源：互联网发布：专业淘宝食品图片拍摄编辑：程序博客网时间：2024/04/29 22:42
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * {            margin: 0;            padding: 0;        }        body {            background-color: #333;        }        .box {            width: 800px;            height: 42px;            margin: 200px auto;            background: #fff url("img/wifi.png") no-repeat right center;            border-radius: 12px;            position: relative;        }        ul {            list-style: none;            position: absolute;            top: 0;            left: 0        }        li {            float: left;            width: 83px;            height: 42px;            text-align: center;            line-height: 42px;            cursor: pointer;        }        span {            position: absolute;            left: 0;            top: 0;            width: 83px;            height: 42px;            background: url("img/cloud.gif") no-repeat;        }    </style>    <script>        window.onload = function () {            //需求：鼠标放到哪个li上面，span就移动到那个上面。移开，回到原来的位置。点击的话，固定到点击的位置。            //步骤：            //1.老三步。            //2.鼠标放到那个li,移动到上面。            //3.鼠标移开,回到原来位置。            //4.点击的话，固定到点击的位置。            //1.老三步。            var span = document.getElementsByTagName("span")[0];            var liArr = document.getElementsByTagName("li");            //计数器思想            var current = 0;            for(var i=0;i<liArr.length;i++){                //2.鼠标放到那个li,移动到上面。                liArr[i].onmouseover = function () {                    animate(span,this.offsetLeft);                }                //3.鼠标移开,回到原来位置。                liArr[i].onmouseout = function () {                    //鼠标移开，移动到之前记录好的位置。（初始值为0）                    animate(span,current);                }                //4.点击的话，固定到点击的位置。                liArr[i].onclick = function () {                    //点击li之后，把li距离ul左侧的距离记录给current.                    current = this.offsetLeft;                    animate(span,this.offsetLeft);                }            }        }        //缓动框架        function animate(obj,target){            //要用定时器，先清定时器（定时器最好绑定在要移动的盒子上）            clearInterval(obj.timer);            obj.timer = setInterval(function(){                //3.缓动公式                //获取步长                var step = (target-obj.offsetLeft)/10;                //处理步长，让他<0下取整，>0向上取整。这样，我们能够取到-1和1.                step = step>0?Math.ceil(step):Math.floor(step);                obj.style.left = obj.offsetLeft+step+"px";                //运动到指定位置                if(target==obj.offsetLeft){                    clearInterval(obj.timer);                }            },14)        }    </script></head><body>    <div class="box">        <span></span>        <ul>            <li>首页新闻</li>            <li>师资力量</li>            <li>活动策划</li>            <li>企业文化</li>            <li>招聘信息</li>            <li>公司简介</li>            <li>xx校区</li>            <li>xx校区</li>        </ul>    </div></body></html>
阅读全文
0 0