使用jQuery和css3实现了仿淘宝ued博客左边的菜单切换动画
今天看到淘宝ued博客的左侧导航菜单的动画好,要使用jQuery和css3我做一个简单的示例,主要用途是实现jQuery 事件和css3 transition属性。
- 个元素来实现鼠标滑动到某个导航的背景效果,文字颜色也运用css3 transition 渐变的效果
- 当鼠标滑动其它导航的时候。加背景的元素的top值也会随着变化,定位到当前的导航上,同一时候文字字体颜色也会跟着改变;
主要实现的html代码例如以下:
<div class="menuBox">
<div class="itemBg">
</div>
<ul>
<li >
<a href="">首页</a>
</li>
<li>
<a href="">关于我们</a>
</li>
<li class="select">
<a href="">蓝枫专栏</a>
</li>
<li>
<a href="">联系方式</a>
</li>
<li>
<a href="">产品营销</a>
</li>
</ul>
</div>
css样式:
.menuBox{ position: relative; width: 220px; background: #fff; }
.itemBg{ position: absolute; top: 0; left: 0; z-index: -1; height: 41px; background: #f8f8f8; border-left: 5px solid #ff6600; width: 185px;transition:none;}
.menuBox li{ border-top: 1px solid #f8f8f8; float: left; margin-top: -1px;}
.menuBox ul{ margin-left: 32px; float: left; width: 156px; overflow: hidden;}
.menuBox a{ display: block; padding: 9px 0; height: 21px; line-height: 21px; float: left; width: 156px;color:#333;-moz-transition:color .2s;-o-transition:color .2s;-webkit-transition:color .2s;transition:color .2s; text-decoration: none;}
.menuBox a:visited{color:#333}a:focus{outline:0}
.menuBox a:active, .menuBox a:hover,.menuBox .select a{color:#ff5f3e;outline:0; text-decoration: none;}
js代码
$(function(){
var menuBox = $('div.menuBox'),
itemBg = $('div.itemBg',menuBox),
_li = $('li',menuBox),
_licur = $('li.select',menuBox);
//依据默认页面的导航到top设置itemBg的top值
itemBg.css('top',(_licur.offset().top-_licur.closest('div').offset().top));
_li.on({
mouseenter:function(){
var $this =$(this);
itemBg.css({
'top':($this.offset().top-$this.closest('div').offset().top),
'transition-property':'top',
'transition-duration': 0.2+'s'
});
},
mouseleave:function(){
var $this =$(this);
itemBg.css({
'top':(_licur.offset().top-$this.closest('div').offset().top),
'transition-property':'top',
'transition-duration': 0.2+'s'
});
}
})
})
注:考虑到站点性能优化的问题,一般css能实现的样式效果尽量不用js去实现。
demo下载地址:http://download.csdn.net/detail/yilanyoumeng3/8497225
版权声明:本文博主原创文章,博客,未经同意不得转载。
使用jQuery和css3实现了仿淘宝ued博客左边的菜单切换动画的更多相关文章
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- 仿淘宝头像上传功能(三)——兼容 IE6 浏览器。
前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- 高仿淘宝和聚美优品商城详情页实现《IT蓝豹》
高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...
- android版高仿淘宝客户端源码V2.3
android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...
- JS仿淘宝详情页菜单条智能定位效果
类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
- 仿淘宝左侧菜单导航栏纯Html + css 写的
这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考 废话不多说先来个效果图 接下来直接上代 ...
随机推荐
- JS兼容的方式来获取浏览器的宽度
<script type="text/javascript"> //need to wait until onload so body is available win ...
- SWT的TableVierer的使用一
1,简单显示,表格的式样见注释中的内容 import org.eclipse.jface.viewers.TableViewer;import org.eclipse.swt.SWT;import o ...
- java-IO操作性能对照
在软件系统中.IO速度比内存速度慢,IO读写在非常多情况下会是系统的瓶颈. 在java标准IO操作中,InputStream和OutputStream提供基于流的IO操作.以字节为处理单位:Reade ...
- android windows 上JNI编程
昨天学习windows上的JNI编程,JNI说白了就是java和c语言的一个互相沟通的桥梁.java能够调用JNI来完毕调用C语言实现的方法. JNI的全称是(Java native interfac ...
- 黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级)
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级) 企业库提供了一个很强大的验证应用程序模 ...
- 数据结构 《18》----RMQ 与 LCA 的等价性 (一)
前言 RMQ: 数组 a0, a1, a2,..., an-1, 中求随意区间 a[i+1], a[i+2], ..., a[i+k] 的最小值 LCA: 求二叉树中两个节点的最低公共 ...
- Qt国际化相关类
QTextCodec QTextCodec为文本编码之间提供转换. Qt用Unicode 来存储,绘制和操作字符串.在很多情况下你可能希望操作不同编码的数据.例如,大部分日本文档是以Shift-JIS ...
- 深入理解计算机系统之旅(四)处理器(CPU)的体系结构
1.前言 处理器是很复杂的系统,它不是一蹴而就的,它是经过不断的升级.更新.设计之后的产物,而且如今还在保持着不断的更新. 处理器仅仅能运行一系列的指令,每条指令都仅仅是运行某个简单的操作,比方数字相 ...
- lua5.1 和 5.2 关于 sequence 的定义变化,对#table取值的影响
引子 环境 lua 5.2 a = {} for i=1,2 do a[i] = i*3 end a[4] = 11; print(a[#a]) ---print 11 ------- ...
- 第三届蓝桥杯Java高职组决赛第三题
题目描述: 某少年宫引进了一批机器人小车.可以接受预先输入的指令,按指令行动.小车的基本动作很简单,只有3种:左转(记为L),右转(记为R),向前走若干厘米(直接记数字). 例如,我们可以对小车输入如 ...