鼠标滑过列表图片放大,带列表序列号自动生成效果

技术小牛人 2017-11-07

class cto Blog

请转载此文的朋友务必附带原文链接,谢谢。

原文链接: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{
    width20px;
    height60px;
    backgroundurl(../images/u4779.png) no-repeat;  
}
.range p{
        displaynone
}
.hot-exchange ul li.active .range p{
    displayblock;
}
.hot-exchange ul li.active .goods-img{
    width67px;
    height67px;
}

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();
            })
    })
     
 
})

效果如下:

wKioL1gAhKvS0tOyAADcR-aglGo774.pngwKioL1gAhPnSlp0IAADc592GMbQ159.png

本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1861924

登录 后评论
下一篇
云栖号资讯小编
20138人浏览
2020-07-13
相关推荐
Qt Creator介绍
3978人浏览
2015-12-02 09:44:00
超强1000个jquery插件!
2403人浏览
2011-12-18 20:29:00
windows快捷键使用
1108人浏览
2017-11-12 17:23:00
0
0
0
882