每日归档： 2015年5月10日

jQuery:文字滚动效果

是这样的

[源码来自网络,部分有修改]

友情链接太多了,展示的话太占地方了,所以也就只能想其它办法解决了……

于是,滚动信息的效果就出来了,具体效果可以查看本博边栏右侧下方的效果.(也可以看下面的图[gif,点击看动图]……)

jQuery文字滚动效果
image-2272

实现

实现效果很简单,最关键的就是css和jQuery的控制.参照下面的源码:

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
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=(device-dpi)/2" />
        <title>文字滚动</title>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <style type="text/css">
        .record_Top{width:90%; height:50px; background:url(../images/record_Bg.png) center center no-repeat; background-size:contain; text-align:center; line-height:50px; margin:30px auto 0px; color:#fff;}
        .topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#7C7C7C}
        .topRec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#1B96EE;}
        .topRec_List dl dd{ width:100%; height:40px; line-height:40px; }
        .maquee{ height:195px;}
        .topRec_List ul{ width:100%; height:195px;}
        .topRec_List li{ width:100%; height:38px; line-height:38px; text-align:center; font-size:12px; border-bottom: 1px dashed #aaa;}
        </style>
    </head>
    <body>
        <div class="Top_Record">
            <div class="record_Top"><p>滚动示例</p></div>
            <div class="topRec_List">
                <dl>
                    <dd>编号</dd>
                </dl>
                <div class="maquee">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                    </ul>
                </div>
            </div>
        </div>
        <script type="text/javascript">
        function autoScroll(obj){
        $(obj).find("ul").animate({
        marginTop : "-39px"
        },500,function(){
        $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
        })
        }
        $(function(){
        setInterval('autoScroll(".maquee")',2000);
        })

        </script>
    </body>
</html>