jQuery-淘宝精品服装案例展示
生活随笔
收集整理的這篇文章主要介紹了
jQuery-淘宝精品服装案例展示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
淘寶精品服裝案例用jQuery實現如下圖所示：
分析整個結構：
1.整個結構由一個div進行包裹，左邊放一個ul，ul里面有九個li，每個li里面包含一個a標簽；右邊放一個div，右邊放一個ul，ul里面有九個li，每個li里面包含img標簽。
2.左邊的ul和右邊的div都進行浮動。保證兩個結構在一行顯示。
3.左邊的li的背景需要實現漸變效果，采用background-image: linear-gradient(方向, 顏色1, 顏色2)進行實現。
實現代碼如下：
首先寫HTML布局,把頁面布局先寫出來
<body><div id="context"><div id="left"><ul><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><div id="right"><ul><li><img src="img/女靴.jpg"></li><li><img src="img/雪地靴.jpg"></li><li><img src="img/冬裙.jpg"></li><li><img src="img/呢大衣.jpg"></li><li><img src="img/毛衣.jpg"></li><li><img src="img/棉服.jpg"></li><li><img src="img/女褲.jpg"></li><li><img src="img/羽絨服.jpg"></li><li><img src="img/牛仔褲.jpg"></li></ul></div></div> </body>然后寫CSS樣式，頁面的樣式
<style type="text/css">*{margin: 0;padding: 0;}a{text-decoration: none;}ul li{list-style: none;}#context{width: 282px;height: 250px;margin: auto;border: 1px solid pink;overflow: hidden; }#left{width: 80px;height: 250;float: left;}#right{width: 200px;height: 250px;float:right;}#left>ul li{width: 80px;height: 26px;border: 1px solid pink;}#left>ul li a{width: 80px;height: 26px;text-decoration: none;text-align: center;display: inline-block;color: black;background-color: lightpink;}#left>ul li a:hover{background-color: pink;color: white;}</style>最后寫頁面的效果，用Javascript和jQuery來實現效果
1.點擊左邊的列表右邊div對應的圖片顯示出來，需要對每個li進行鼠標滑動點擊事件綁定。
2.取出點擊的li的索引，然后把對應的div顯示出來，其余的隱藏。
<script src="js/jquery.min.js"></script><script>$(function(){$("#left>ul li").mouseover(function(){var index = $(this).index()$("#right>ul li:eq("+index+")").fadeIn().siblings().hide()})})</script>總結
以上是生活随笔為你收集整理的jQuery-淘宝精品服装案例展示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android拍照软件推荐,Androi
- 下一篇： 服务器系统清理工具,服务器清理内存工具