淘宝服饰案例

最新推荐文章于 2022-10-30 15:30:19 发布
最新推荐文章于 2022-10-30 15:30:19 发布
阅读量283 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43750162/article/details/89044951
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.wrap{
				width: 402px;
				height: 275px;
				border: 1px solid pink;
				margin: 100px auto;
				overflow: hidden;
			}
			.left,#center,#right{
				float: left;
				list-style: none;
			}
			.left li,#right li{
				width: 100px;
				height: 30px;
				border: 1px solid pink;
				text-align: center;
				line-height: 30px;
				border-bottom: none;
				border-left: none;
			}
			#right li{
				border-left: 1px solid pink;
				border-right: none;
			}
			.left a,#right a{
				width: 100px;
				height: 30px;
				text-decoration: none;
				display: inline-block;
				color: black;
				background: url(images/lili.jpg) repeat-x;
				background-size: 100% 100%;
			}
			.left a:hover{
				background: url(images/abg.gif) repeat-x;
				color: white;
			}
			#right a:hover{
				background: url(images/abg.gif) repeat-x;
				color: white;
			}
		</style>
		<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				
				$('.left li').mouseenter(function(){
					$('#center li').eq($(this).index()).show().siblings().hide();
				})
				$('#right li').mouseenter(function(){
					$('#center li').eq($(this).index()+9).show().siblings().hide();
				})
			})
		</script>
	</head>
	<body>
		<div class="wrap">
			<ul class="left">
				<li style="border-top: none;"><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="images/女靴.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/女包.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/男包.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/登山鞋.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/皮带.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/围巾.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/皮衣.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/男毛衣.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/男棉服.jpg" width="200" height="250" /></a>
				</li>
				<li>
					<a href="#"><img src="images/男靴.jpg" width="200" height="250" /></a>
				</li>
			</ul>
			<ul id="right">
				<li style="border-top: none;">
					<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>
yjx_43750162
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery-----淘宝精品服饰案例
guohui的博客
02-05 2547
一、设计思路 主要的设计思路是把这个分为几部分了解好，每一部分又包括什么都要弄明白。 咱们要做的效果图如下图所示： 设计思路： 这个效果分为两部分，左边是9个小的li，里面放物品名称；右边是盒子，盒子里面放的图片。当我们鼠标再女靴上时右边的图片就要变成女靴的图片，当我们鼠标在呢大衣上时右边图片就要变成呢大衣的图片，同理每一个都是这样变化的。 所以得出结论就是：当我们得到左侧索引值in...
淘宝服饰精品案例
m0_59030524的博客
03-15 1055
案例分析： 核心原理:最标经过左侧盒子某个小i，就让内容盒子相对应图片显示，其余的图片隐藏； 需要得到当前小i的索引号，就可以显示对应索引号的图片; jQuery得到当前元素索引号$(this).index(); 中间对应的图片，可以通过eq(index)方法去选择; 显示元素show()，隐藏元素hide(). <script src="jquery.min.js"></script> <style> * {
淘宝精品服饰案例
xyw_jzj5201314的博客
11-11 438
淘宝精品服饰案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 12px;
淘宝服饰精品案例分析
weixin_45147894的博客
10-20 335
微信二维码服装服饰行业营销成功案例分享.doc
06-23
微信二维码服装服饰行业营销成功案例分享 01、ONLY 案例亮点 根据目标受众的准确定位，借助时尚群体对个性事物的关注与追求，结合ONLY推出的微电影《忆战》主题活动，使品牌理念与完美结合，充分迎合目标受众的兴趣...
电子商务案例分析海外代购小红书案例分析.pptx
11-16
海外代购的商品种类多样、数量繁多，从美容化装品、营养保健品、服饰鞋类箱包，到电子消费品、珠宝手表、书籍乐器等，只要你想到、看的到，都可以代购。 海外代购的发展背景是经济全球化趋势的表达。随着生产全球化...
第一章 电子商务案例分析概述
07-11
电子商务的定义： 　电子商务交易当事人或参与人利用计算机技术和网络技术等现代信息技术所进行的各类商务活动， 　包括货物贸易、服务贸易和知识产权贸易。 　对电子商务的理解，可从4方面考虑： ...
B2C电子商务网站案例分析天猫商城.docx
最新发布
09-16
"B2C电子商务网站案例分析天猫商城" 一、天猫商城简介 天猫商城是阿里巴巴集团旗下的B2C电子商务网站，面向全球消费者销售各类商品。其前身为淘宝商城，于2010年正式独立运营，是阿里巴巴集团未来重点发展的核心...
51shop单用户商城系统 2.0
04-30
51shop单用户商城系统，本系统主要针对鞋类、服装类等在线交易客户。本系统的功能包括：会员管理系统、新闻管理系统、商品管理系统、商品库存管理系统、补货单系统、订单系统、预存款系统、积分系统、快递单批量打印...
淘宝网店案例分析.rar
07-09
淘宝网店案例分析
淘宝添加衣服和API属性工具html保存
08-03
淘宝添加衣服和API属性工具页html页面保存
6.淘宝服饰精品案例
qq_34620296的博客
12-18 895
效果如下 鼠标经过某个li会显示对应的图片,而隐藏其他图片 代码 <script src="jQuery.js"></script> <script> /* 核心原理: 1.鼠标经过左侧盒子某个小li,就让内容区盒子显示,其余图片隐藏 2.需要得到当前li的索引号,就可以显示对应索引号的图片 ...
jQuery淘宝精品服饰案例
叶先生
10-26 340
淘宝精品服饰案例 –> 女靴 雪地靴 冬裙 呢大衣 毛衣 棉服 女裤 羽绒服 牛仔裤 <div> <a href="#"><img src="../images/雪地靴.jpg" alt="" width="448" height="360"></a> </div> <div> ...
888 案例：淘宝服饰精品案例，新浪下拉菜单案例（使用 jQuery）
weixin_51249285的博客
07-20 1215
案例：淘宝服饰精品案例，新浪下拉菜单案例（使用 jQuery）
Jquery实现淘宝服饰精品案例
qq_43781887的博客
06-21 1962
需要的效果如下：布局分析：1.整个结构由一个div进行包裹，左边放一个ul，ul里面有九个li，每个li里面包含一个a标签；右边放一个div，div里面又包含九个div，每个div里面包含一个a标签，a标签里面包含一个img标签。2.左边的ul和右边的div都进行浮动。保证两个结构在一行显示。3.左边的li的背景需要实现渐变效果，采用background-image: linear-gradient(方向, 颜色1, 颜色2)进行实现。功能分析：1.点击左边的列表右边div对应的图片显示出来，需要对每个li
淘宝服饰精品广告
weixin_33913377的博客
01-01 105
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{
新浪下拉菜单案例淘宝服饰精品案例
m0_66506641的博客
10-30 264
遇到的问题依然是jQuery文件不存在，我重新导入，检查路径是否正确，最后发现每次导入文件必须在同一个目录下导入才能成功。原因：jQuery文件导入不成功。遇到的问题：下拉框不显示。
jquery案例：淘宝精品服饰案例（简写，重点是jquery的代码）
vfjcgg的博客
04-19 1113
案例：淘宝精品服饰案例 1.核心原理：鼠标经过某个盒子鼠标小li，就让内容区盒子相对应图片显示，其余的图片隐藏， 2.需要得到当前小li的索引号， 3.jQuery得到当前元素的索引号$(this).index() 4.中间对印的图片，可以通过eq(index)方法去选择 5.显示元素show(),隐藏元素hide() 栗子： <!DOCTYPE html> <html lang...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值