淘寶側(cè)邊服務模塊圖如下：

當我們把鼠標移到充話費這個模塊上時，上面的圖標會有一個快速的向上移動然后又回到原來位置的過程。
仔細觀察后，可以將這個動畫過程分解為三步：

圖片向上移出并消失：這一步主要是靠改變top屬性的值和opacity來實現(xiàn)。

圖片將top設置為一個固定值，這個值將會作為為下一步動畫執(zhí)行時的初始值：這一步只需改變top值。

圖片回歸到原來的位置并顯示：改變top和opacity來實現(xiàn)。

通過以上步驟的分解，實現(xiàn)過程就比較的簡單了，只需要適當?shù)脑黾觿赢嬓Ч憧梢詫崿F(xiàn)。下面是利用了js,jquery,css3這三種方式來實現(xiàn)該效果的代碼。

原生js實現(xiàn)

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];}}

這里主要是利用了定時器的效果來實現(xiàn)的。需要注意的幾個地方如下：
第一：注意在每次執(zhí)行startMove（）之前首先要清除掉定時器，否則多個動畫之間會相互爭搶定時器。
第二：這里的speed的計算方式根據(jù)當前值與目標值的差值計算，這樣當差值越大速度也就越快。
第三：當某一個效果值與目標值相等時不能直接清除定時器，需要先判斷，因為可能有其他效果沒完成，必須等到所有的動畫效果都完成時才能清除定時器執(zhí)行回調(diào)函數(shù)。

jQuery實現(xiàn)
利用jquery的animate來實現(xiàn)該效果特別的簡單，代碼如下：

$('.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實現(xiàn)

.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便可以實現(xiàn)，也特別的簡單。

下面是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>內(nèi)衣</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);} }

以上便是全部的實現(xiàn)。

總結

以上是生活随笔為你收集整理的模拟淘宝侧边服务模块鼠标悬停效果的三种实现方式总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。