旋转木马

最新推荐文章于 2022-01-05 21:09:22 发布

媛源缘

最新推荐文章于 2022-01-05 21:09:22 发布

阅读量230

点赞数

文章标签：旋转木马

本文链接：https://blog.csdn.net/qq_43469418/article/details/86515897

版权

   function getStyle(ele,attr) {
       return window.getComputedStyle ? window.getComputedStyle(ele,null)[attr] : ele.currenStyle[attr];
   }
function animate(ele,json,fn) {
 clearInterval(ele.timeId);
ele.timeId=setInterval(function () {
//假设都到达目标值
var flag=true;
//遍历对象中的每个属性
for(var attr in json){
if(attr=="opacity"){
//获取当前元素的属性值
var current=parseInt(getStyle(ele,attr)*100);
//获取目标值
var target=json[attr]*100;
//移动的步数
var step=(target-current)/10;
step= step>0 ? Math.ceil(step):Math.floor(step);
//移动后的值
current+=step;
ele.style[attr]=current/100;
}else if(attr=="zIndex"){
ele.style[attr]=json[attr];
}else {
//获取当前元素的属性值
var current=parseInt(getStyle(ele,attr));
//获取目标值
var target=json[attr];
//移动的步数
var step=(target-current)/10;
step= step>0 ? Math.ceil(step):Math.floor(step);
//移动后的值
current+=step;
ele.style[attr]=current+"px";
}

if(current!=target){
flag=false;
}

}
if(flag){
clearInterval(ele.timeId);
//判断是否传入了这个函数
if(fn){
fn();
}
}
//测试代码
//console.log("目标位置"+target+"当前位置"+current+"每次移动的步数"+step);
},20);

}



    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

    ];
    window.function () {
        var flag=true;//假设动画执行完了
        var list = myTab("slide").getElementsByTagName("li");

        function flower() {
            //图片散开
            for (var i = 0; i < list.length; i++) {
                //设置每个Li的宽，透明度，left,top,zIndex
                animate(list[i], config[i],function () {
                    flag=true;//执行到回调函数，说明动画效果以完成
                });
            }
        }
        flower();
        myTab("slide").onmouseover=function(){
            animate(myTab("arrow"),{"opacity":1});
        }
        myTab("slide").onmouseout=function(){

            animate(myTab("arrow"),{"opacity":0});
        }

        //点击按钮删除第一个元素，并将删除的元素添加到数组中的最后
        myTab("arrLeft").onclick = function () {
            if(flag){
                config.unshift(config.pop());
                flower();
            }

        }
        //点击按钮删除最后一个元素，并将删除的元素添加到数组中的第一个
        myTab("arrRight").onclick = function () {
           if(flag){
               config.push(config.shift());
               flower();
               flag=false;
           }
        }
    }