jQuery淘宝服饰精品案例
生活随笔
收集整理的這篇文章主要介紹了
jQuery淘宝服饰精品案例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
效果圖：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}#left li {width: 50px;padding: 0 10px;text-align: center;line-height: 30px;border: 1px solid pink;}#left li a {color: #333;text-decoration: none;}#left,#content {float: left;}#content img {display: block;height: 288px;}</style><script src="./jquery.min.js"></script><script>$(function () {// 鼠標經(jīng)過左側(cè)li$('#left li').mouseover(function () {// 得到li的索引號var index = $(this).index()// 讓右側(cè)盒子相應(yīng)索引號的圖片顯示出來$('#content div').eq(index).show()// 讓其余圖片隱藏$('#content div').eq(index).siblings().hide()})})</script></head><body><div class="wrapper"><ul id="left"><li><a href="javascript:;">女靴</a></li><li><a href="javascript:;">雪地靴</a></li><li><a href="javascript:;">冬裙</a></li><li><a href="javascript:;">呢大衣</a></li><li><a href="javascript:;">毛衣</a></li><li><a href="javascript:;">棉服</a></li><li><a href="javascript:;">女褲</a></li><li><a href="javascript:;">羽絨服</a></li><li><a href="javascript:;">牛仔褲</a></li></ul><div id="content"><div><a href="javascript:;"><img src="./img/landscape1.jpg" alt="" /></a></div><div><a href="javascript:;"><img src="./img/landscape2.jpg" alt="" /></a></div><div><a href="javascript:;"><img src="./img/landscape3.jpg" alt="" /></a></div><div><a href="javascript:;"><img src="./img/landscape4.jpg" alt="" /></a></div><div><a href="javascript:;"><img src="./img/landscape1.jpg" alt="" /></a></div><div><a href="javascript:;"><img src="./img/landscape2.jpg" alt="" /></a></div><div><a href="javascript:;"><img src="./img/landscape3.jpg" alt="" /></a></div><div><a href="javascript:;"><img src="./img/landscape4.jpg" alt="" /></a></div><div><a href="javascript:;"><img src="./img/landscape1.jpg" alt="" /></a></div></div></div></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的jQuery淘宝服饰精品案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 常用算法框架
- 下一篇： C语言入门项目——BMI指数计算器