基于jquery仿天猫分类导航banner切换
分享一款基于jquery天猫分类导航banner切换。这是一款仿最新天猫商品分类导航控制banner图片切换代码。效果图如下：
部分代码：
<div class="yHeader">
<div class="yNavIndex">
<div class="pullDown">
<h2 class="pullDownTitle">
所有商品分类
</h2>
<ul class="pullDownList">
<li class="menulihover"><i class="listi1"></i><a href="" target="_blank">手机</a> /<a href="" target="_blank">数码</a> /<a href="" target="_blank">电脑办公</a> <span></span>
</li>
<li><i class="listi2"></i><a href="" target="_blank">女装</a> /<a href="" target="_blank">内衣</a>
<span></span></li>
<li><i class="listi3"></i><a href="" target="_blank">男装</a> /<a href="" target="_blank">运动户外</a>
<span></span></li>
<li><i class="listi4"></i><a href="" target="_blank">女鞋</a> /<a href="" target="_blank">男鞋</a>
/<a href="" target="_blank">箱包</a> <span></span></li>
<li><i class="listi5"></i><a href="" target="_blank">化妆品</a> /<a href="" target="_blank">个人护理</a>
<span></span></li>
<li><i class="listi6"></i><a href="" target="_blank">母婴玩具</a> <span></span></li>
<li><i class="listi7"></i><a href="" target="_blank">零食</a> /<a href="" target="_blank">进口食品</a>
/<a href="" target="_blank">酒</a> <span></span></li>
<li><i class="listi8"></i><a href="" target="_blank">大家电</a> /<a href="" target="_blank">生活电器</a>
<span></span></li>
<li><i class="listi9"></i><a href="" target="_blank">家具建材</a> <span></span></li>
<li><i class="listi10"></i><a href="" target="_blank">珠宝饰品</a> /<a href="" target="_blank">腕表眼镜</a>
<span></span></li>
<li><i class="listi11"></i><a href="" target="_blank">汽车</a> /<a href="" target="_blank">配件</a>
/<a href="" target="_blank">用品</a> <span></span></li>
<li><i class="listi12"></i><a href="" target="_blank">家纺</a> /<a href="" target="_blank">家饰</a>
/<a href="" target="_blank">鲜花</a> <span></span></li>
<li><i class="listi13"></i><a href="" target="_blank">医药保健</a> <span></span></li>
<li><i class="listi14"></i><a href="" target="_blank">厨具</a> /<a href="" target="_blank">收纳</a>
/<a href="" target="_blank">宠物</a> <span></span></li>
<li><i class="listi15"></i><a href="" target="_blank">图书音像</a> <span></span></li>
</ul>
<div class="yMenuListCon">
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3>
<a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a> <a href="">商场同款</a> <a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a> <a href="">
男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a> <a href="">商场同款</a>
<a href="">男装集结</a> <a href="">羽绒服</a> <a href="">加厚羽绒 </a><a href="">高帮鞋</a>
</p>
</div>
</div>
via：http://www.w2bc.com/Article/32809
基于jquery仿天猫分类导航banner切换的更多相关文章
- 基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
- Jquery仿京东分类导航层简单实现
<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script& ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 基于jQuery仿Flash横向切换焦点图
给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...
- 基于jQuery仿迅雷影音官网幻灯片特效
分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览 源码下载 实现的代码. html ...
- 基于jQuery编写的横向自适应幻灯片切换特效
基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个蛋疼的浏览器兼容性问题上得到了和谐,兼容IE6. 适用浏览器:IE6.IE7.IE8.360.Fire ...
- 基于jquery的侧边栏分享导航
今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- 基于jQuery带标题的图片3D切换焦点图
今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...
- 基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="slid ...
随机推荐
- yml在线格式转换工具（properties）
分享一个在线properties 转 yml工具,也支持yml转properties, 域名非常简单好记,直接在地址栏里输入toyaml.com,地址:http://toyaml.com/ yml,即 ...
- java装箱拆箱
基本数据类型的自动装箱(autoboxing).拆箱(unboxing)是自J2SE 5.0开始提供的功能. 一般我们要创建一个类的对象的时候,我们会这样: Class a = new Class(p ...
- 解决Mysql中文乱码问题的方案
MySQL会出现中文乱码的原因不外乎下列几点: 1.server本身设定问题,例如还停留在latin12.table的语系设定问题(包含character与collation)3.客户端程式(例如ph ...
- 解决sitemesh3装饰页面不能使用freemarker标签问题
如题,这个问题其实在sitemesh2中已经很好的解决了,不过在sitemesh3中可能没有解决,所以要自己写代码解决了,下面我先讲下sitemesh2是如何解决的: <servlet> ...
- PHP5.5新特性
详情见:http://www.php.net/manual/zh/migration55.new-features.php 1. 生成器 yield关键字 yield的中文文档在这里:http://p ...
- SecureCRT 详细使用教程和技巧
SecureCRT 常用技巧 0.在secureCRT里切换不同的窗口:ctrl+tab. 复制:[ctrl] + [shift] + c 粘贴:[ctrl] + [shift] + v ...
- 利用C#改写JAVA中的Base64.DecodeBase64以及Inflater解码
最近正在进行项目服务的移植工作,即将JAVA服务的程序移植到DotNet平台中. 在JAVA程序中,有个HTTP请求数据头中,包含一个BASE64编码的字符串,例如: eJyVjMENgDAMA1fp ...
- 修改Excel默认模版（启动模版和新建Sheet模版）
Office 2013 1. C:\Windows\ShellNew\EXCEL12.XLSX 设置好格式后另存为, 然后复制过来覆盖掉,如果覆盖不了,注意修改所有者权限 2. 新建文件保存为模版文 ...
- ELK系统搭建流程
ELK系统搭建流程 1. Logstash 1.1 安装 注:安装在需要收集日志的机器上. cd /data/softs sudo wget https://download.elastic.co/l ...
- Python 列表 reverse() 方法
描述 Python 列表 reverse() 方法对列表中的元素进行反向排序. 语法 reverse() 方法语法: L.reverse() 参数 无. 返回值 该方法没有返回值,但是会对列表的元素进 ...