各位小伙伴们大家新年好呀!在此我祝愿各位在新的一年里顺风顺水,不脱头发早脱单。好了,废话不多说,因为之前写项目遇到过类似小米官网home图标那样的效果,最近发现对这块还有点遗忘了。所以咱们今天来通过jQuery简单的方式来还原这个效果。
小米官网顶部图标的样子,当我们鼠标放上去的时候显示图2的房子logo,鼠标滑出时显示MI的logo,当然您可以去小米官网再看一下这样的效果。我是使用jQuery的自定义动画来完成这样一个效果话不多说,我们开始吧
- 第一步是先获取到这两张图片
- 第二步我是将这两张图片放在了一个div里面
<div class="logo">
<a href="#"><img id="mi" src="./img/logo1.png"></a>
<a href="#"><img id="home" src="./img/logo2.png"></a>
</div>
- 第三步我们来设置它们的位置关系,及样式,这里我是使用了定位。
.logo{
width: 55px;
height: 55px;
background-color:#ff6700;
position: absolute;
left:0px;
top:24px;
overflow: hidden;
}
.logo #mi{
position: absolute;
left:3px;
top:4px;
}
.logo #home{
position: absolute;
left: -37px;
top:2px;
}
- 样式设好之后我们就可以来写js部分啦,这里我是用到了jQuery的自定义动画和事件切换的hover方法。有遗忘的伙伴可以查一下相关的内容。
- 写js代码:
$(".logo").hover(function(){
$("#mi").stop().animate({
left:60
},300)
$("#home").stop().animate({
left:0
},300)
},function(){
$("#mi").stop().animate({
left:0
},300)
$("#home").stop().animate({
left:-50
},300)
})
- 好了,各位伙伴可以试一下啦,jQuery完成这样的效果还是比较简单的。