JQuery-淘宝精品
2024-06-03 21:24:08
淘宝精品案列
<style type="text/css">* {margin: 0;padding: 0;font-size: 12px;}ul {list-style: none;}a {text-decoration: none;}.wrapper {width: 298px;height: 248px;margin: 100px auto 0;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="../js/jquery-1.12.4.js"></script>
<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="200" height="250" /></a></li><li><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/棉服.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/女裤.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/女包.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/男靴.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/登山鞋.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/皮带.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/围巾.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/皮衣.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/男毛衣.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/男棉服.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/男包.jpg" width="200" height="250" /></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>
<script>// 我们发现：导航项的索引应该对应着图片的索引(右侧应该进行单独的处理)// 处理这个效果的关键问题在于能够到当前li的索引，从而让对应索引位置的图片显示，让其它的图片隐藏// index()只能获取当前元素在所有兄弟元素中的索引，它是jq的方法$(function () {//获取所有图片let $imgs = $('#center>li')// console.log($imgs);//给左侧导航添加移入事件$('#left> li').mouseenter(function () {let index = $(this).index();// fadeIn():渐渐显示// fadeOut():渐渐消失$imgs.eq(index).siblings().fadeOut();$imgs.eq(index).fadeIn();})// 给右侧添加移入$('#right>li').mouseenter(function () {let index = $(this).index() + $('#left>li').length;$imgs.eq(index).siblings().fadeOut();$imgs.eq(index).fadeIn();})})</script>
JQuery-淘宝精品相关推荐
- 验证用户输入的是不是中文名字 淘宝精品案例 元素样式设置的方式 链式编程
验证用户输入的是不是中文名字 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
- 淘宝精品案例JS、jQuery
自己只会适用原生js来实现 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
- jQuery 实现淘宝精品案例
源码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
- jquery实现淘宝精品案例
HTML <div class="wrapper"><ul id="left"><li><a href="# ...
- jQuery实现模拟淘宝精品
鼠标移入到商品名字,中间显示对应的图片: <!DOCTYPE html> <html lang="en"><head><meta char ...
- jQuery淘宝服饰精品案例
效果图: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
- 【jQuery学习】淘宝精品栏案例
利用jquery实现了tab栏切换 <style>*{margin: 0;padding: 0;}.wrapper{width: 250px;height: 248px;margin: 1 ...
- jQuery—淘宝精品服饰案例
<body><div class="wrapper"><ul id="left"><li><a href= ...
- jquery淘宝详情页选择套餐实现
代码相关: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
- 淘宝快捷通道——百汇家园
百汇家园 是一个便捷的通道,喜欢网购的同学,都可以在百汇家园了解到所需要的相关 产品的信息.我们的商品分为15个大类,包含了淘宝所有的商品,满足你的购物 需求. 百汇家园通过与淘宝的网店合作,将淘宝优 ...
最新文章
- [转载]用数据说话 Pytorch详解NLLLoss和CrossEntropyLoss
- Oracle 树操作(select…start with…connect by…prior)
- C++ Primer 5th笔记（chap 13 拷贝控制）拷贝构造函数
- 指定的参数错误。Vim.Host.DiskPartitionInfo.-spec VSPHERE.LOCAL\Administrator WIN-DOPGQVRRU2C
- 得到当前堆栈信息的两种方式（Thread和Throwable）的方法
- destoon b2b 360网站智能摘要标签配置
- eps倾斜摄影矢量化采集毕业设计_eps倾斜摄影矢量化dlg采集
- [vc中文绿色版本]33.8 MB下载
- 数据结构之二叉树的创建
- c++引用另一个类的方法_利用CVE20191132：Windows内核中的另一个NULL指针取消引用...
- java 日志时间格式_java.util.logging.Logger 使用中关于时间格式的问题
- 六石编程学：功能要定期测试
- 读《About Face 4 交互设计精髓》4
- 1000套电子物联网专业毕业设计和电赛设计资料822份
- 谐振放大器工作点和阻抗
- 如何在阿里云建立网站
- 17.光照（点光源）
- 【软件推荐】Linux的一些好玩的软件
- 微生太 | 宏基因组分箱Binning（一）基础介绍与报告展示
- 最新 955 不加班的公司名单（2022 版）