模拟淘宝侧边服务模块鼠标悬停效果的三种实现方式总结
淘宝侧边服务模块图如下：
当我们把鼠标移到充话费这个模块上时，上面的图标会有一个快速的向上移动然后又回到原来位置的过程。
仔细观察后，可以将这个动画过程分解为三步：
图片向上移出并消失：这一步主要是靠改变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);
}
}以上便是全部的实现。