微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery仿京东侧边栏导航效果

本文实例为大家分享了jquery仿京东侧边栏导航的具体代码,供大家参考,具体内容如下

样式代码

rush:css;">

jQuery代码

这里把图片名称换成数字的,每一个图标都有两个图片一个白色和一个绿色的,当鼠标移动到其中一个图标处时,改变其图片使其变色,因为一共有八个图标,所以总共有16张图片。因此图片名改变为当前图片名称数字+8。

这里用的动态是slideDown与slideUp。需要注意的是要设置索引来寻找但前对象的位置(因为是在for循环里有了索引才能找到当前对象的图片的数字名称)。

rush:js;">

布局代码

rush:xhtml;">
我的订单

<div class="sign sign_top">

我的收藏
我的优惠券
我的足迹
我的JImu

<div class="sign sign_top sign_add_height">

微信扫码享优惠

<div class="sign sign_top sign_end">

加关注

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐