模拟淘宝侧边服务模块鼠标悬停效果的三种实现方式总结

最新推荐文章于 2020-09-03 09:17:04 发布

原创最新推荐文章于 2020-09-03 09:17:04 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #淘宝网右边鼠标动画

JS 专栏收录该内容

51 篇文章

订阅专栏

本文总结了模拟淘宝侧边服务模块鼠标悬停时图标快速移动动画的三种实现方式：原生JavaScript、jQuery和CSS3。通过改变top属性和opacity，结合动画效果，详细阐述了每种方法的实现细节和技术要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

淘宝侧边服务模块图如下：

当我们把鼠标移到充话费这个模块上时，上面的图标会有一个快速的向上移动然后又回到原来位置的过程。
仔细观察后，可以将这个动画过程分解为三步：

图片向上移出并消失：这一步主要是靠改变top属性的值和opacity来实现。
图片将top设置为一个固定值，这个值将会作为为下一步动画执行时的初始值：这一步只需改变top值。
图片回归到原来的位置并显示：改变top和opacity来实现。

通过以上步骤的分解，实现过程就比较的简单了，只需要适当的增加动画效果便可以实现。下面是利用了js,jquery,css3这三种方式来实现该效果的代码。

原生js实现

    window.onload = function() {
            var oMove = document.getElementById('tab-list'),
                aList = oMove.getElementsByTagName('a');
            for(var i = 0, len = aList.length; i < len; i++) {
                aList[i].onmouseover = function() {
                    var _this = this.getElementsByTagName('i')[0];
                    startMove(_this, {'top':-25,'opacity':0},function() {
                        _this.style.top = '40px';
                        startMove(_this,{top:20,opacity:100});
                    });
                }
            }
        }
        function startMove(elem,options,fn) {
            var iCur = 0,
                speed = 0,
                flag = true;
             **clearInterval(elem.timer);**

            elem.timer = setInterval(function() {
                for(var attr in options) {
                    flag = true;
                    iCur = 0;
                    if(attr === 'opacity') {
                        iCur = Math.round( parseFloat(getStyle(elem, attr)) * 100 ); 
                    } else {
                        iCur = parseInt(getStyle(elem, attr));

                    }
                    speed = (options[attr] - iCur) / 8; 
                    speed = speed > 0?Math.ceil(speed): Math.floor(speed);
                    if(iCur !== options[attr]) {
                        flag = false;
                    }
                    if(attr === 'opacity') {
                        elem.style.filter = 'alpha(opacity=' + (iCur + speed) + ')';
                        elem.style.opacity = (iCur + speed) / 100;
                    }else {
                        elem.style[attr] = iCur + speed + 'px';
                    }

                }
                **if(flag) {
                    clearInterval(elem.timer);
                    if(fn) {
                        fn();
                    }
                }**
            }, 30);
        }

        function getStyle(obj, attr) {
            if(obj.currentStyle) {
                return obj.currentStyle[attr];
            }else {
                return getComputedStyle(obj, null)[attr];
            }
        }

这里主要是利用了定时器的效果来实现的。需要注意的几个地方如下：
第一：注意在每次执行startMove（）之前首先要清除掉定时器，否则多个动画之间会相互争抢定时器。
第二：这里的speed的计算方式根据当前值与目标值的差值计算，这样当差值越大速度也就越快。
第三：当某一个效果值与目标值相等时不能直接清除定时器，需要先判断，因为可能有其他效果没完成，必须等到所有的动画效果都完成时才能清除定时器执行回调函数。

jQuery实现
利用jquery的animate来实现该效果特别的简单，代码如下：

$('.tab-list').on('mouseover','.mod a', function() {
    var $iTag = $(this).find('i');
    $iTag.animate({'top':'-25px','opacity':0},300, function() {
        $iTag.css('top','35px');
        $iTag.animate({'top':'20px','opacity':100},300)
    });
})

css3实现

.mod a i:hover {
    -webkit-animation: up-down ease-in-out 0.5s;
}
@-webkit-keyframes up-down {
    0% {
        opacity:1;
        -webkit-tranform:translateY(0px);
    }
    50% {
        opacity:0;
        -webkit-transform:translateY(-25px);
    }
    75% {
        opacity:0;
        -webkit-transform:translateY(35px);
    }
    100% {
        opacity:1;
        -webkit-trnasform:translateY(-10px);
    }
}

利用animation属性和tranform便可以实现，也特别的简单。

下面是html结构：

<div class="container">
        <ul class="tab-list" id="tab-list">
            <li class="mod">
                <a href="javascript:;">
                    <i class="td-icon icon1"></i>
                    <span>充值</span>
                </a>
            </li>
            <li class="mod">
                <a href="javascript:;">
                    <i class="td-icon icon2"></i>
                    <span>汉堡</span>
                </a>
            </li>
            <li class="mod">
                <a href="javascript:;">
                    <i class="td-icon icon3"></i>
                    <span>黄冠</span>
                </a>
            </li>
            <li class="mod">
                <a href="javascript:;">
                    <i class="td-icon icon4"></i>
                    <span>进口商品</span>
                </a>
            </li>
            <li class="mod">
                <a href="javascript:;">
                    <i class="td-icon icon5"></i>
                    <span>咖啡</span>
                </a>
            </li>
            <li class="mod">
                <a href="javascript:;">
                    <i class="td-icon icon6"></i>
                    <span>喵鲜生</span>
                </a>
            </li>
            <li class="mod">
                <a href="javascript:;">
                    <i class="td-icon icon7"></i>
                    <span>奶瓶</span>
                </a>
            </li>
            <li class="mod">
                <a href="javascript:;">
                    <i class="td-icon icon8"></i>
                    <span>内衣</span>
                </a>
            </li>
            <li class="mod">
                <a href="javascript:;">
                    <i class="td-icon icon9"></i>
                    <span>生日礼物</span>
                </a>
            </li>
            <li class="mod">
                <a href="javascript:;">
                    <i class="td-icon icon10"></i>
                    <span>生鲜水果</span>
                </a>
            </li>
            <li class="mod">
                <a href="javascript:;">
                    <i class="td-icon icon11"></i>
                    <span>食品</span>
                </a>
            </li>
            <li class="mod">
                <a href="javascript:;">
                    <i class="td-icon icon12"></i>
                    <span>手机</span>
                </a>
            </li>
        </ul>
    </div>

css代码如下：

* {
    margin:0;
    padding:0;
}
ul, li {
    list-style-type:none;
}
body {
    position:relative;
    font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
}
.container{
    position:relative;
    width:240px;
    margin:0 auto;
    margin-top:50px;

}
.container .tab-list {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    overflow:hidden;
    border:1px solid #ff4400;

}
.tab-list .mod {
    float:left;
    width:57px;
    /*height:76px;*/
}
.mod a {
    position:relative;
    display:block;
    height:100%;
    text-align:center;
    text-decoration:none;
    color:#6c6c6c;
    padding:10px 0;
    overflow:hidden;
}
.mod a:hover {
    color:#ff4400;

}
.mod a i {
    position:absolute;
    display:block;
    top:20px;
    width:36px;
    height:36px;
    margin-left:10px;
    opacity:1;
    filter:alpha(opacity=100);

}
.mod a i:hover {
    -webkit-animation: up-down ease-in-out 0.5s;
}
.mod a span {
    display:block;
    margin-top:56px;
    height:10px;

}
.mod .icon1 {
    background:url('../img/iconfont-chongzhi.png') no-repeat;
}
.mod .icon2 {
    background:url('../img/iconfont-hanbao.png') no-repeat;
}
.mod .icon3 {
    background:url('../img/iconfont-huangguan.png') no-repeat;
}
.mod .icon4 {
    background:url('../img/iconfont-jinkoushangpin.png') no-repeat;
}
.mod .icon5 {
    background:url('../img/iconfont-kafei.png') no-repeat;
}
.mod .icon6{
    background:url('../img/iconfont-miaoxiansheng.png') no-repeat;
}
.mod .icon7{
    background:url('../img/iconfont-naiping.png') no-repeat;
}
.mod .icon8{
    background:url('../img/iconfont-neiyi.png') no-repeat;
}
.mod .icon9{
    background:url('../img/iconfont-shengriliwu.png') no-repeat;
}
.mod .icon10{
    background:url('../img/iconfont-shengxianshuiguo.png') no-repeat;
}
.mod .icon11{
    background:url('../img/iconfont-shipin.png') no-repeat;
}
.mod .icon12{
    background:url('../img/iconfont-shouji.png') no-repeat;
}

@-webkit-keyframes up-down {
    0% {
        opacity:1;
        -webkit-tranform:translateY(0px);
    }
    50% {
        opacity:0;
        -webkit-transform:translateY(-25px);
    }
    75% {
        opacity:0;
        -webkit-transform:translateY(35px);
    }
    100% {
        opacity:1;
        -webkit-trnasform:translateY(-10px);
    }
}

以上便是全部的实现。