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

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

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

图片向上移出并消失：这一步主要是靠改变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);}
}

以上便是全部的实现。

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

【python】模拟淘宝的客服自动回复系统-socket,json,time模块的应用
最近在研究soctet模块的过程中,尝试做个小的练习,第一反应是做个类似qq或者微信的即时聊天,这个需求相对比较简单,采用UDP协议很快就可以实现,为了提高点难度,于是决定尝试模拟淘宝的自动回复功能, ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
零基础带你用python模拟淘宝登录
经过一段时间的学习,并参考各路大神的文章,总结出一些比较适合小白的网络爬虫的小技巧.跟着笔者的思路,循序渐进,可以慢慢找到一点小感觉. 开发环境笔者选用的是vs code,轻量级,支持各种插件安装. ...
jquery+原生js模拟淘宝输入框下拉提示
1.概述: 模拟淘宝.百度的搜索框,当用户输入时,会自动下拉提示关键字,使用组件jquery.js(1.12.1),jquery-ui.js(1.12.1).jquery-ui.css(1.12.1) ...
利用python从网页查找数据_利用Python模拟淘宝的搜索过程并对数据进行可视化分析...
数据挖掘入门与实战公众号: datadw 本文讲述如何利用Python模拟淘宝的搜索过程并对搜索结果进行初步的数据可视化分析. 搜索过程的模拟:淘宝的搜索页面有两种形式, 一种形式是, 2019/2 ...
Python+Selenium模拟淘宝滑块并爬取商品数据
注:如果侵犯了Alibaba的权益,请联系我删除. 上一篇博客已经完成了模拟淘宝登陆,本节主要记录如何爬取淘宝商品列表页数据,同时如何模拟人的操作完成滑块的验证. 代码如下: #encoding=ut ...
天猫淘宝企业服务为中小微企业打造供应链智能协同网络，让采购不再将就！丨爱分析报告
编者按:近日天猫淘宝企业服务&爱分析联合发布<2023中小微企业电商采购白皮书>,为中小微企业采购数字化带来红利. 某水泵企业:线上客户主要是中小微企业,线上业绩遇到瓶颈,如何突破 ...
selenium模拟淘宝登陆
使用selenium打开浏览器,模拟人工进行淘宝的登陆活动可以在网上找到两种解决方案. 第一种方案是打开网站后,通过find_element_by_xpath 依次寻找用户名录入框,密码录入框,登陆按 ...
python爬虫淘宝登录_python爬虫实现模拟淘宝登录
就算所有人都不支持你.这条路会很曲折,你也会一度认为是不是自己选错了,但只要坚持,就算最后没有成功,但努力了就不会有遗憾. python爬虫模拟淘宝登录小贴士这个爬虫和搜索引擎的爬虫是有区别的.搜 ...

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

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

最新文章

热门文章