淘宝精品服饰案例用JQuery实现
淘宝精品服饰案例用JQuery实现
效果图如下：
实现代码如下：
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝精品服饰案例title>
<style>
* {
margin: 0;
padding: 0;
}ul {
list-style: none;
}a {
text-decoration: none;
}.wrapper {
width: 252px;
height: 250px;
margin: 100px auto;
border: 1px solid pink;
overflow: hidden;
}#left{float: left;}#left li{width: 48px;height: 27px;text-align: center;border-bottom: 1px solid pink;line-height: 27px;padding: 0 2px;}#left li a{color: #000;}style><script type="text/javascript" src="jquery.min.js">script><script>$(function(){$("#left li").mouseover(function(){var index=$(this).index();$("#content div").eq(index).show();$("#content div").eq(index).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="images/nv.jpg" width="200" height="250" />a>div><div><a href="#"><img src="images/xdx.jpg" width="200" height="250" />a>div><div><a href="#"><img src="images/dq.jpg" width="200" height="250" />a>div><div><a href="#"><img src="images/ndy.jpg" width="200" height="250" />a>div><div><a href="#"><img src="images/my.jpg" width="200" height="250" />a>div><div><a href="#"><img src="images/mf.jpg" width="200" height="250" />a>div><div><a href="#"><img src="images/nk.jpg" width="200" height="250" />a>div><div><a href="#"><img src="images/yrf.jpg" width="200" height="250" />a>div><div><a href="#"><img src="images/nzk.jpg" width="200" height="250" />a>div>div>div>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！