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

當(dāng)我們把鼠標(biāo)移到充話費(fèi)這個(gè)模塊上時(shí)，上面的圖標(biāo)會(huì)有一個(gè)快速的向上移動(dòng)然后又回到原來位置的過程。
仔細(xì)觀察后，可以將這個(gè)動(dòng)畫過程分解為三步：

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

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

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

通過以上步驟的分解，實(shí)現(xiàn)過程就比較的簡單了，只需要適當(dāng)?shù)脑黾觿?dòng)畫效果便可以實(shí)現(xiàn)。下面是利用了js,jquery,css3這三種方式來實(shí)現(xiàn)該效果的代碼。

原生js實(shí)現(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];}}

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

jQuery實(shí)現(xiàn)
利用jquery的animate來實(shí)現(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實(shí)現(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便可以實(shí)現(xiàn)，也特別的簡單。

下面是html結(jié)構(gòu)：

<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>進(jìn)口商品</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>手機(jī)</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);} }

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

總結(jié)

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

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