淘宝服饰精品案例分析

案例分析

案例实现代码

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;font-size: 12px;}ul {list-style: none;}a {text-decoration: none;}.wrapper {width: 250px;height: 248px;margin: 100px auto 0;border: 1px solid pink;border-right: 0;overflow: hidden;}#left,#content {float: left;}#left li {background: url(images/lili.jpg) repeat-x;}#left 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 {background-image: url(images/abg.gif);}#content {border-left: 1px solid pink;border-right: 1px solid pink;}</style><script src="jquery.min.js"></script><script>$(function() {$("#left li").mouseover(function() {// 获取当前的索引号var index = $(this).index();console.log(index);// // 让我们右侧盒子显示出来// $("#content div").eq(index).show();// // 其他兄弟隐藏起来// $("#content div").eq(index).siblings().hide();// 链式编程$("#content div").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><div id="content"><div><a href="#"><img src="data:images/女靴.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/棉服.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/女裤.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250" /></a></div></div></div>
</body></html>

代码运行结果

淘宝服饰精品案例分析相关推荐

Jquery实现淘宝服饰精品案例
需要的效果如下: 布局分析: 1.整个结构由一个div进行包裹,左边放一个ul,ul里面有九个li,每个li里面包含一个a标签:右边放一个div,div里面又包含九个div,每个div里面包含一个a标 ...
jQuery 选择器之案例：淘宝服饰精品案例
案例:淘宝服饰精品案例 ①核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏. ②需要得到当前小li 的索引号,就可以显示对应索引号的图片 ③jQuery 得到当前元素 ...
新浪下拉菜单案例淘宝服饰精品案例
目录 1.新浪下拉菜单 2.淘宝服饰精品 1.新浪下拉菜单利用jQuery基础选择器$("选择器") 选择对应的方法实现实现效果实现代码 <script>$(fu ...
jQuery淘宝服饰精品案例
效果图: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
jQuery基本使用_选择器_淘宝服饰切换案例_样式操作_效果_王者荣耀手风琴
文章目录一.基本使用 1.jquery入口函数 2.$符 3.DOM对象和jQuery对象的转换二.jquery选择器 1.基础选择器 2.隐式迭代 3.筛选选择器 4.筛选方法 5.排他思想淘 ...
Spark商业案例与性能调优实战100课》第11课：商业案例之通过纯粹通过DataFrame分析大数据电影点评系仿QQ和微信、淘宝等用户群分析与实战
Spark商业案例与性能调优实战100课>第11课:商业案例之通过纯粹通过DataFrame分析大数据电影点评系仿QQ和微信.淘宝等用户群分析与实战
4 Python数据分析淘宝母婴用品数据分析案例
Python数据分析 1 淘宝母婴用品数据分析案例 1.1 数据介绍数据来源:Baby Goods Info Data 1.2 字段介绍婴儿信息数据 Tianchi_mum_baby.csv 字段 ...
淘宝登录取Cookie分析
淘宝登录取Cookie分析二维码登录二维码登录通过手机扫描二维码登录,整体步骤如下: 打开网页,定位到二维码标签,点击,让登陆框载入二维码 : 等待扫码,同时判断二维码是否过期,过期则刷新二维码 ...
如何用mysql对淘宝用户行为进行分析
一.项目背景和目的项目集中于对淘宝用户行为的分析,如购买时段的分析.热销商品的分析.用户行为转化漏斗分析以及通过RFM模型对用户进行分类等,希望从中探索用户购买的规律,并将这些规律与店铺营销策略相结 ...

淘宝服饰精品案例分析

案例分析

案例实现代码

代码运行结果

淘宝服饰精品案例分析相关推荐

最新文章

热门文章