动画效果之旋转木马

运用基本的属性设置，封装animate函数

效果预览

公共方法：

//根据id获取对应的元素
function my$(id) {
    return document.getElementById(id);
}
/*
* element---任意的元素
* attr---属性
* */
function getAttrValue(element,attr) {
	//return element.style[attr] ;
    return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0;
	
	
}
/*终极版本的动画函数 */
function animate(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
        var flag=true;//假设都达到了目标
        for(var attr in json){
            if(attr=="opacity"){//判断属性是不是opacity
                var current= getAttrValue(element,attr)*100;
                //每次移动多少步
                var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改
                var step=(target-current)/10;//(目标-当前)/10
                step=step>0?Math.ceil(step):Math.floor(step);
                current=current+step;
                element.style[attr]=current/100;
            }else if(attr=="zIndex"){//判断属性是不是zIndex
                element.style[attr]=json[attr];
            }else{//普通的属性
                //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
                var current= parseInt(getAttrValue(element,attr))||0;
                //每次移动多少步
                var target=json[attr];//直接赋值给一个变量,后面的代码都不用改
                var step=(target-current)/10;//(目标-当前)/10
                step=step>0?Math.ceil(step):Math.floor(step);
                current=current+step;
                element.style[attr]=current+"px";
            }
            if(current!=target){
                flag=false;//如果没到目标结果就为false
            }
        }
        if(flag){//结果为true
            clearInterval(element.timeId);
            if(fn){//如果用户传入了回调的函数
                fn(); //就直接的调用,
            }
        }
    },10);
}

旋转木马逻辑

• html

<div class="slide" id="slide">
        <ul>
            <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:;" class="prev" id="arrLeft"></a>
            <a href="javascript:;" class="next" id="arrRight"></a>
        </div>
    </div>

• js逻辑

//数组--这个是旋转的li元素所对应的属性值
var config = [
    {
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
    },//0
    {
        width: 600,
        top: 70,
        left: 0,
        opacity: 0.8,
        zIndex: 3
    },//1
    {
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
    },//2
    {
        width: 600,
        top: 70,
        left: 600,
        opacity: 0.8,
        zIndex: 3
    },//3
    {
        width: 400,
        top: 20,
        left: 750,
        opacity: 0.2,
        zIndex: 2
    }//4
];
 //这个是每次变换config数据的时候，所对应的元素属性变化的动画函数
function assign(lis) {
   for(var i=0;i<lis.length;i++){
        animate(lis[i],config[i],function () {
            flag=true;
        });
    }
}

window.onload=function () {
     //所有图片全部放开，初始化li的位置
     var lis=my$("slide").children[0].children;
     assign(lis);
     //箭头的显示与隐藏--也用的是动态显示及动态隐藏
     my$("wrap").onmouseover=function () {
         animate(my$("arrow"),{"opacity":1});
     };
     my$("wrap").onmouseout=function () {
         animate(my$("arrow"),{"opacity":0});
     };
     //加锁
     var flag=true;
     //左--点击向左移动，变换的是config数组，改变的是元素属性
     my$("arrLeft").onclick=function () {
         if(flag){
            flag=false;
             config.unshift(config.pop());
             assign(lis);
         }

     };
     //右--点击向右移动，同样变换的是config数组，改变的是元素属性
     my$("arrRight").onclick=function () {
         if(flag){
             flag=false;
             config.push(config.shift());
             assign(lis);
         }
     };
 }

点击下载源码