手风琴

最新推荐文章于 2025-06-23 16:14:56 发布

媛源缘

最新推荐文章于 2025-06-23 16:14:56 发布

阅读量127

点赞数 1

CC 4.0 BY-SA版权

文章标签：手风琴

本文链接：https://blog.youkuaiyun.com/qq_43469418/article/details/86499701

//给每一个li添加背景图片
var list= myTab("box").getElementsByTagName("li");
for(var i=0;i<list.length;i++){
    list[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";
 list[i].onmouseover=function () {
       for(var j=0;j<list.length;j++){
           animate(list[j],{"width":100});
       }
     animate(this,{"width":960});
       this.style.backgroudSize="100% ";
 }
 list[i].onmouseout=function () {
     for(var i=0;i<list.length;i++){
         animate(list[i],{"width":240});
     }
    this.style.backgroudSize="";
 }

}
function getStyle(ele,attr) {
    return window.getComputedStyle ? window.getComputedStyle(ele, null)[attr] : ele.currenStyle[attr];
}
function animate(ele, json) {
    clearInterval(ele.timeId);
    ele.timeId = setInterval(function () {
        var flag = true;//假设到达目标位置
        for (var attr in json) {
            //获取元素当前位置
            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";
            //如果有一个当前的位置不等于目标位置，让flag为false

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

        }
        //循环过后，如果flag为true，则证明都到达了目标位置

        if (flag) {
            clearInterval(ele.timeId);
        }
        //测试代码
        console.log("目标位置" + target + ",当前的位置" + current + "," +
            "每次移动的步数" + step);
    }, 20);
}