请转载此文的朋友务必附带原文链接，谢谢。
原文链接：http://xuyran.blog.51cto.com/11641754/1861924
这里我只把关键代码给贴出来。
html:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<div class="hot-exchange">
<ul>
<li class="active clear">
<a href="">
<div class="range"><p>排名</p></div>
<div class="goods-title">
<p>放逐之刃</p>
<p>16800C豆</p>
</div>
<div class="goods-img">
<img src="../Content/images/123_u4776.png" alt=""/>
</div>
</a>
</li>
<li class="clear">
<a href="">
<div class="range"><p>排名</p></div>
<div class="goods-title">
<p>放逐之刃</p>
<p>16800C豆</p>
</div>
<div class="goods-img">
<img src="../Content/images/123_u4776.png" alt=""/>
</div>
</a>
</li>
<li class="clear">
<a href="">
<div class="range"><p>排名</p></div>
<div class="goods-title">
<p>放逐之刃</p>
<p>16800C豆</p>
</div>
<div class="goods-img">
<img src="../Content/images/123_u4776.png" alt=""/>
</div>
</a>
</li>
<li class="clear">
<a href="">
<div class="range"><p>排名</p></div>
<div class="goods-title">
<p>放逐之刃</p>
<p>16800C豆</p>
</div>
<div class="goods-img">
<img src="../Content/images/123_u4776.png" alt=""/>
</div>
</a>
</li>
<li class="clear">
<a href="">
<div class="range"><p>排名</p></div>
<div class="goods-title">
<p>放逐之刃</p>
<p>16800C豆</p>
</div>
<div class="goods-img">
<img src="../Content/images/123_u4776.png" alt=""/>
</div>
</a>
</li>
<li class="clear">
<a href="">
<div class="range"><p>排名</p></div>
<div class="goods-title">
<p>放逐之刃</p>
<p>16800C豆</p>
</div>
<div class="goods-img">
<img src="../Content/images/123_u4776.png" alt=""/>
</div>
</a>
</li>
</ul>
</div>
|
css代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.hot-exchange ul li.active .range{ width: 20px;
height: 60px;
background: url(../images/u4779.png) no-repeat;
}.range p{ display: none
}.hot-exchange ul li.active .range p{ display: block;
}.hot-exchange ul li.active .goods-img{ width: 67px;
height: 67px;
} |
jquery代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$(function(){
//兑换专区左侧鼠标滑动效果
var serialNumber = 0;
var serialNumberLen = 6;
$(".hot-exchange ul li").each(function(){
serialNumber++;
if(serialNumber > serialNumberLen){
return false;
}
$(this).children().find(".range").append('0'+serialNumber);
$(this).mouseover(function(){
$(this).addClass("active").siblings().removeClass("active");
$(this).children().find(".range p").show();
$(this).siblings().children().find(".range p").hide();
})
})
}) |
效果如下：
本文转自 小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1861924