使用jQuery完成小米官网图标

各位小伙伴们大家新年好呀！在此我祝愿各位在新的一年里顺风顺水，不脱头发早脱单。好了，废话不多说，因为之前写项目遇到过类似小米官网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完成这样的效果还是比较简单的。

使用jQuery完成小米官网图标相关推荐

jQuery的小米官网-----侧边导航栏
目录前言 1.原生js和jQuery优势对比 1.1.原生JavaScript优点 1.2.jQuery优点 2.侧边栏代码展示 2.1. 原生js代码 2.2.jQuery代码总结前言时隔多 ...
jQuery实现小米官网
1. 实现导航栏中"下载App",和"购物车",的下拉效果分析:第一步还是先把要操作的元素获取过来.不论是JS还是jQuery,你要对哪个元素做某件事,都是要 ...
花季美少女和小米官网你选哪个？
前言花季少女和小米官网你选哪个?只有小孩子才做选择,你当然都会拥有!我们今天就看看花季美少女是怎么用jQuery写小米官网的,看看女孩子的思维和男孩子有什么不一样!css的东西我这里就不多说啦,时间 ...
小米官网重做jQuery
文章目录前言一.修改value里面的值二.登录和注册点击切换三.自动切换登录注册总结前言这次是使用jQuery来重新做小米官网里面的效果一.修改value里面的值 $("id ...
项目一：《小米官网》jQuery重构
小米官网项目的整体布局就不多说了,在项目一:<小米官网>中我就写过了,我就是直接复制粘贴的之前的 html 和 css,只是把JS部分用jQuery重新写了一遍,不想打字了,直接分享下我的 ...
仿照小米官网项目具体操作与细节
本项目已上传github 有需要的可以下载点这里前往下载小米官网项目具体操作 1.gulp的搭建一 , 打开node控制台命令行输入 cd 加文件夹路径进入当前文件夹命令行输入 cnpm ...
Outline，Input样式的设置，小米官网搜索框
在做小米项目右上角的搜索框的时候,发现了该问题,现总结如下: outline outline和border类似,只不过outline不占用空间,而border占用空间 #box1{width: 300 ...
前端700行代码项目练习--小米官网（仅html、css实现）
目录一.效果展示二.准备工具 1.css重置样式 2.awesome图标字体 3.各图片 4.title网站图标三.代码一.效果展示二.准备工具 1.css重置样式请自行查找,CSDN上一 ...
实战小米官网静态页面1：导航栏部分
小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距图片原 ...

使用jQuery完成小米官网图标

使用jQuery完成小米官网图标相关推荐

最新文章

热门文章