使用JQuery实现淘宝导航栏效果

我们要实现一个淘宝导航栏的效果，先看一下运行效果

要实现这个效果的话我们第一步首先要

1.div布局设id

<div id="context"><div id="left"><ul><li><a href="#">女靴</a></li><li><a href="#">雪地靴</a></li><li><a href="#">冬裙</a></li><li><a href="#">呢大衣</a></li><li><a href="#">毛衣</a></li><li><a href="#">棉服</a></li><li><a href="#">女裤</a></li><li><a href="#">羽绒服</a></li><li><a href="#">牛仔裤</a></li></ul></div><div id="right"><ul><li><img src="img/女靴.jpg" /></li><li><img src="img/雪地靴.jpg" /></li><li><img src="img/冬裙.jpg" /></li><li><img src="img/呢大衣.jpg" /></li><li><img src="img/毛衣.jpg" /></li><li><img src="img/棉服.jpg" /></li><li><img src="img/女裤.jpg" /></li><li><img src="img/羽绒服.jpg" /></li><li><img src="img/牛仔裤.jpg" /></li></ul></div></div>

2.写css样式

<style type="text/css">/* 初始化 */*{margin: 0px;padding: 0px;margin: auto;}ul{list-style: none;width: 100px;}#context{width: 280px;height: 250px;border: 1px solid lightpink;overflow: hidden;/* 隐藏多余的图片 */}#left{width: 50px;float: left;}#right{width: 200px;}#left ul li a{display: inline-block;width: 80px;height: 25.8px;background-color: pink;color: white;text-align: center;line-height: 26px;text-decoration: none;/* 去超链接自带样式 */border: 1px #FFB6C1 solid;}#left a:hover{background-color: aquamarine;}</style>

3.写JQuery代码

<script src="js/jquery.min.js"></script><script type="text/javascript">$(function(){//鼠标滑动显示$("#left>ul li").mouseover(function(){//左侧索引var index = $(this).index();//显示索引相对图片，其他不显示$("#right>ul li:eq(" +index+")").fadeIn().siblings().hide();});});</script>

使用JQuery实现淘宝导航栏效果相关推荐

安卓仿淘宝导航栏实现
RadioButton+Fragment仿淘宝导航栏因为博主本人是初学者,所以本文参考了多位大佬的文章后才弄明白,以下代码由本人根据多位博主的文章整合修改完成效果图主布局xml文件 <?x ...
【iOS开发】导航栏，类似淘宝“我的淘宝”导航栏
转载地址: https://blog.csdn.net/fanxiaomeng92/article/details/72771666
Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果
Bootstrap 网格系统 1.Bootstrap网格系统工作原理 Bootstrap的网格系统是指将页面布局划分为等宽的列.随着屏幕或视口尺寸的增加,系统会自动分为1~12列. 网格系统用于通过一 ...
jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
jQuery仿淘宝鼠标悬停动画图标导航特效
jQuery仿淘宝鼠标悬停动画图标导航特效下载地址:jQuery仿淘宝鼠标悬停动画图标导航特效 http://www.sucaijiayuan.com/Js/DaoHangDaiMa/1462.ht ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
Android导航栏高斯模糊,iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果...
(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIIma ...
android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...

使用JQuery实现淘宝导航栏效果

1.div布局设id

2.写css样式

3.写JQuery代码

使用JQuery实现淘宝导航栏效果相关推荐

最新文章

热门文章

使用JQuery实现淘宝导航栏效果

1.div布局 设id

2.写css样式

3.写JQuery代码

使用JQuery实现淘宝导航栏效果相关推荐

最新文章

热门文章

1.div布局设id