jquery实现淘宝动态图展示商品
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: ;
padding: ;
font-size: 12px;
} ul {
list-style: none;
} a {
text-decoration: none;
} .wrapper {
width: 298px;
height: 248px;
margin: 100px auto ;
border: 1px solid pink;
overflow: hidden;
} #left, #center, #right {
float: left;
} #left li, #right li {
background: url(images/lili.jpg) repeat-x;
} #left li a, #right li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
} #left li a:hover, #right li a:hover {
background-image: url(images/abg.gif);
} #center {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style> <script src="../jquery-1.12.4.js"></script>
<script> $(function () {
$("#left>li").mouseenter(function () {
$("#center>li:eq("+$(this).index()+")").show().siblings().hide();
})
$("#right>li").mouseenter(function () {
var index=$(this).index()+;
$("#center>li").eq(index).show().siblings().hide();
}) }) </script> </head>
<body>
<div class="wrapper"> <ul id="left">
<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>
<ul id="center">
<li><a href="#"><img src="data:images/女靴.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/雪地靴.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/冬裙.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/呢大衣.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/毛衣.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/棉服.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/女裤.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/羽绒服.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/牛仔裤.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/女包.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/男靴.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/登山鞋.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/皮带.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/围巾.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/皮衣.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/男毛衣.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/男棉服.jpg" width="" height=""/></a></li>
<li><a href="#"><img src="data:images/男包.jpg" width="" height=""/></a></li> </ul>
<ul id="right">
<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>
</body>
</html>
在没有加js之前,是不会具有动态展示
$(function () {
$("#left>li").mouseenter(function () {
$("#center>li:eq("+$(this).index()+")").show().siblings().hide();
})
$("#right>li").mouseenter(function () {
var index=$(this).index()+;
$("#center>li").eq(index).show().siblings().hide();
}) })
js解读:
$("#left>li")获取#left类下的li
$("#center>li:eq("+$(this).index()+")") 获取中间部分跟现在索引位置相同的的地方
jquery实现淘宝动态图展示商品的更多相关文章
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- jQuery模仿淘宝商品评价
最近做项目要做个商品评价的功能,我直接就跑到淘宝那里去研究了,可看着晕晕的,还不知道他是怎么做的,于是把图抠了下来,自己写了一个,接下来就展示一下我是怎么做的,大家有不同的实现方法可要记得分享一下呀. ...
- jquery模拟淘宝购物车
今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面 总体页面效果如图: 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选 ...
- ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐功能
如今随便上个网都能够看到淘宝.京东等各大电商平台的双十一购物狂欢宣传,从2009年開始淘宝愣是把11.11这一天打造成了全民购物狂欢节.阿里巴巴的上市更是激发了阿里人的斗志,据说他们今年的目标是100 ...
- javascript实现 京东淘宝等商城的商品图片大图预览功能
在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出现一 ...
- jQuery实现淘宝购物车小组件
我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...
- javascript实现 京东淘宝等商城的商品图片大图预览功能(图片放大器)
在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出 ...
- Android点击跳转到淘宝的某一商品详情页或者某一店铺页面
最近项目的有个需求是点击购买资料按钮进入淘宝界面,简单分析一下,如果用户手机有淘宝就打开淘宝的页面,没有的话也可以选择使用webView进行展示,还是使用手机浏览器进行展示. 判断有无淘宝的代码就不贴 ...
随机推荐
- pl/sql简介
- cocos2d-x 在vs2010下的搭建(win7系统)
1从官网下载cocos2d-x2.1.3的源码地址如下: http://cocos2d-x.org/ 2.解压下载的软件包我们会发现红框中vs2010的项目文件双击打开它 3.打开后我们要生成一些wi ...
- sed陷阱
sed陷阱: sed -i 后不要紧跟字母, 否则会产生一个新的备份文件(在原文件后多出来一个字母) // 正确写法 /usr/bin/sed -i "/PREFIX=/d" ...
- Shiro——认证
引入shiro依赖 <!-- shiro --> <dependency> <!-- shiro-core Required in all environments. - ...
- 关于instanceof测试遇到的问题
今天上上课 用 instanceof关键字来判断某个对象是否属于某种数据类型.报错 代码如下 package cn.lijun.demo3; import cn.lijun.demo.Person; ...
- HDU 3724 Encoded Barcodes (Trie)
题意:给n个字符串,给m个询问,每个询问给k个条形码.每个条形码由8个小码组成,每个小码有相应的宽度,已知一个条形码的宽度只有2种,宽的表示1,窄的表示0.并且宽的宽度是窄的宽度的2倍.由于扫描的时候 ...
- 20169219 实验四Android程序设计
一.实现Linux下dc的功能,计算后缀表达式的值 public int evaluate(String expr) { int op1, op2, result = 0; String token; ...
- EBS登陆界面个性化
把完整资料贴出来 Set the profile option Local Login Mask (FND_SSO_LOCAL_LOGIN_MASK). (This profile option is ...
- Mono for Android for Visual Studio 2010安装及试用
安装 Mono for Android for Visual Studio 2010 需要下面4个步骤: 1.安装 JDK 下载并安装 Java 1.6 (Java 6) JDK. 2.安装 Andr ...
- 使用Filter对POST和GET方式的请求参数的进行统一解码
一.过滤器 二.自定义request类