原生js动画的应用

模仿百度新闻导航栏

* {
            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;
        }

<div class="nav">
    <span id="cloud"></span>
    <span id="cloud1"></span>
    <ul id="navBar">
        <li>北京大学</li>
        <li>上海大学</li>
        <li>广州大学</li>
        <li>深圳大学</li>
        <li>武汉大学</li>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>招贤纳士</li>
    </ul>
</div>

var list = my$("navBar").children;
    for ( var i = 0; i < list.length; i++){
        var img = my$("cloud");
        var wigthObj = 0;	//接收点击某个li的偏移量
        list[i].onmouseover = function () {
            animate1(img,this.offsetLeft);
        }
        list[i].onmouseout = function () {
            animate1(img,wigthObj);
        }
        list[i].onclick = function () {
            wigthObj = this.offsetLeft;
            my$("cloud1").style.left = this.offsetLeft + "px";
        }
    } 



function my$(id){
    return document.getElementById(id);
}

//变速函数
function animate1(element,target) {
    //清除下定时器
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        //获取元素当前位置
        var current = element.offsetLeft;
        //移动的步数
        var step = (target - current) / 10;
        //判断
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        current += step;
        element.style.left = current + "px";
        if (current == target){
            clearInterval(element.timer);
        }
    },40)
}

手风琴案例

ul {
            list-style: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1200px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }

        div ul {
            width: 1300px;
        }

<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

//js代码
var list = my$("box").getElementsByTagName("li");
    //给每一个li添加背景图片
    for ( var i = 0; i < list.length;i++){
        list[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";
        list[i].onmouseover = function () {
        	//先将所有的li的宽度变为100px
            for ( var j = 0;j < list.length;j++){
                animate2(list[j],100,"width");
            }
            animate2(this,800,"width");
            this.style.backgroundSize = "100% 100%";
        }
        list[i].onmouseout = function () {
            for ( var j = 0;j < list.length;j++){
                list[j].style.width = "240px";
            }
            this.style.backgroundSize = "";
        }
    }


function animate2(element,target,attr) {
    //清除下定时器
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        //获取元素当前位置
        var current = parseInt(getStyle(element,attr));//化整
        //移动的步数
        var step = (target - current) / 10;
        //判断
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        current += step;
        element.style[attr] = current + "px";
        if (current == target){
            clearInterval(element.timer);
        }
    },30)
}

//解决兼容问题
function getStyle(element,attr){
    return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currenStyle[attr];
}

开机时间的小界面

.box {
            width: 322px;
            position: fixed;
            bottom: 0;
            right: 0;
            overflow: hidden;
        }

        span {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 20px;
            cursor: pointer;
        }

<div class="box" id="box">
    <span id="closeButton"></span>
    <div class="hd" id="headPart">
        <img src="images/t.jpg" alt=""/>
    </div>
    <div class="bd" id="bottomPart">
        <img src="images/b.jpg" alt=""/>
    </div>
</div>

my$("closeButton").onclick = function () {
        animate4(my$("bottomPart"),{"height":0},function () {
            animate4(my$("box"),{"width":0});
        })
    }



function animate4(element,json,fn) {
    //清除下定时器
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        var flag = true;//假设全部到达目标位置
        for ( var attr in json) {
            //获取元素当前位置
            var current = parseInt(getStyle(element,attr));//化整
            //目标的值
            var target = json[attr];
            //移动的步数
            var step = (target - current) / 10;
            //判断
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            current += step;
            element.style[attr] = current + "px";
            //如果有一个当前的位置不等于目标位置，让flag为false
            if (current != target){
                flag = false;
            }
        }
        //循环过后，如果flag为true，则证明都到达了目标位置
        if (flag){
            //清除定时器
            clearInterval(element.timer);
            //所有的属性达到目标才调用这个函数
            //如果用户传了fn，则调用
            if (fn){
                fn();
            }
        }
    },30)
}

function getStyle(element,attr){
    return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currenStyle[attr];
}