鼠标滑过列表图片放大,带列表序列号自动生成效果-阿里云开发者社区

开发者社区> 云计算> 正文
登录阅读全文

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

简介:

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

原文链接: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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: