网页特效之手风琴

效果:使用动画，当鼠标经过某张图片，该图片(容器)宽度变大显示，其他图片宽度缩小显示。
关键知识：动画基本原理：盒子目标位置 = 盒子本身位置 + 步长具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .box {
            width: 1150px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid red;
            overflow: hidden;
        }
        .box ul {
            width: 1300px;
        }
        .box li{
            width: 240px;
            height: 400px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="box" class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script>
var box = document.getElementById("box");
var lis = box.children[0].children;
for(var i=0;i<lis.length;i++){
    lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";
    lis[i].onmouseover = function(){
        for(var j=0;j<lis.length;j++){
            animate(lis[j],{width:120})
        }
        animate(this,{width:720});
    }
    lis[i].onmouseout = function(){
        for(var k=0;k<lis.length;k++){
            animate(lis[k],{width:240});
        }
    }

}
//动画函数
function animate(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var flag = true;//判断定时器是否清除的开关
        var current = 0;//用于存放当前属性
        //遍历json
        for(var attr in json){
            if(attr == "opacity"){
                //透明度
                current = Math.round(parseInt(getStyle(obj,attr)*100))|| 0;//ie678没有opacity,会产生undefined,undefined || 0为0;防止在ie产生undefined+1-->NaN的结果
            }else{
                current = parseInt(getStyle(obj,attr));//得到当前属性并去除px
            }
            // console.log(json[attr]);
            //计算步长 （目标位置-当前位置)/10
            var step = (json[attr] - current)/10;
            step = step > 0 ? Math.ceil(step):Math.floor(step);
            //判断属性
            if(attr == "opacity"){
                if("opacity" in obj.style){
                    //w3c标准浏览器(支持opavity)
                    obj.style.opacity = (current + step)/100;
                }else{
                    //ie678
                    obj.style.filter = "alpha(opacity = "+(current+step)+")";
                }
            }else if(attr == "zIndex"){
                    obj.style.zIndex = json[attr];
            }else{
                obj.style[attr] = current + step + "px";
            }
            // console.log(current);
            if(current != json[attr]){
                //如果有任一属性没有达到目标值
                flag = false;
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fn){//执行回调函数
                fn();
            }
        }
    },10);
}
//得到样式
function getStyle(obj,attr){
    //参数：对象，属性
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return window.getComputedStyle(obj,null)[attr];
    }
}
</script>
</html>
具体效果可见：手风琴
网页特效之手风琴

猜你喜欢
