文本滚动包括从上到下／从左到右／等

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE>
<html>

<head>
    <title>向上下左右不间断无缝滚动效果(兼容火狐和IE)</title>
    <meta charset="utf-8">
</head>

<body>
    <div id="colee" style="overflow:hidden;height:253px;width:410px;">
        <div id="colee1">
            <p>此处放文字。。。。。。。。。1</p>
            <p>此处放文字。。。。。。。。。2</p>
            <p>此处放文字。。。。。。。。。3</p>
            <p>此处放文字。。。。。。。。。4</p>
            <p>此处放文字。。。。。。。。。5</p>
            <p>此处放文字。。。。。。。。。6</p>
            <p>此处放文字。。。。。。。。。7</p>
            <p>此处放文字。。。。。。。。。8</p>
            <p>此处放文字。。。。。。。。。9</p>
            <p>此处放文字。。。。。。。。。0</p>
            <p>此处放文字。。。。。。。。。11</p>
            <p>此处放文字。。。。。。。。。12</p>
        </div>
        <div id="colee2"></div>
    </div>

    <script>
    var speed = 30;
    var colee2 = document.getElementById("colee2");
    var colee1 = document.getElementById("colee1");
    var colee = document.getElementById("colee");
    colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
    function Marquee1() {
        //当滚动至colee1与colee2交界时
        if (colee2.offsetTop - colee.scrollTop <= 0) {
            colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
        } else {
            colee.scrollTop++
        }
    }
    var MyMar1 = setInterval(Marquee1, speed) //设置定时器
    //鼠标移上时清除定时器达到滚动停止的目的
    colee.onmouseover = function() { clearInterval(MyMar1) }
    //鼠标移开时重设定时器
    colee.onmouseout = function() { MyMar1 = setInterval(Marquee1, speed) }
    </script>
    <!--向上滚动代码结束-->
    <!--下面是向下滚动代码-->
    <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
        <div id="colee_bottom1">
            <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
            <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
            <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
            <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
            <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
            <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
            <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
            <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
            <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
        </div>
        <div id="colee_bottom2"></div>
    </div>
    <script>
    var speed = 30
    var colee_bottom2 = document.getElementById("colee_bottom2");
    var colee_bottom1 = document.getElementById("colee_bottom1");
    var colee_bottom = document.getElementById("colee_bottom");
    colee_bottom2.innerHTML = colee_bottom1.innerHTML
    colee_bottom.scrollTop = colee_bottom.scrollHeight

    function Marquee2() {
        if (colee_bottom1.offsetTop - colee_bottom.scrollTop >= 0)
            colee_bottom.scrollTop += colee_bottom2.offsetHeight
        else {
            colee_bottom.scrollTop--
        }
    }
    var MyMar2 = setInterval(Marquee2, speed)
    colee_bottom.onmouseover = function() { clearInterval(MyMar2) }
    colee_bottom.onmouseout = function() { MyMar2 = setInterval(Marquee2, speed) }
    </script>
    <!--向下滚动代码结束-->
    <!--下面是向左滚动代码-->
    <div id="colee_left" style="overflow:hidden;width:500px;">
        <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td id="colee_left1" valign="top" align="center">
                    <table cellpadding="2" cellspacing="0" border="0">
                        <tr align="center">
                            <td>
                                <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
                            </td>
                            <td>
                                <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
                            </td>
                            <td>
                                <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
                            </td>
                            <td>
                                <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
                            </td>
                            <td>
                                <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
                            </td>
                            <td>
                                <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
                            </td>
                            <td>
                                <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
                            </td>
                        </tr>
                    </table>
                </td>
                <td id="colee_left2" valign="top"></td>
            </tr>
        </table>
    </div>
    <script>
    //使用div时，请保证colee_left2与colee_left1是在同一行上.
    var speed = 30 //速度数值越大速度越慢
    var colee_left2 = document.getElementById("colee_left2");
    var colee_left1 = document.getElementById("colee_left1");
    var colee_left = document.getElementById("colee_left");
    colee_left2.innerHTML = colee_left1.innerHTML

    function Marquee3() {
        if (colee_left2.offsetWidth - colee_left.scrollLeft <= 0) //offsetWidth 是对象的可见宽度
            colee_left.scrollLeft -= colee_left1.offsetWidth //scrollWidth 是对象的实际内容的宽，不包边线宽度
        else {
            colee_left.scrollLeft++
        }
    }
    var MyMar3 = setInterval(Marquee3, speed)
    colee_left.onmouseover = function() { clearInterval(MyMar3) }
    colee_left.onmouseout = function() { MyMar3 = setInterval(Marquee3, speed) }
    </script>
    <!--向左滚动代码结束-->
    <!--下面是向右滚动代码-->
    <div id="colee_right" style="overflow:hidden;width:500px;">
        <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td id="colee_right1" valign="top" align="center">
                    <table cellpadding="2" cellspacing="0" border="0">
                        <tr align="center">
                            <td>
                                <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
                            </td>
                            <td>
                                <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
                            </td>
                            <td>
                                <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
                            </td>
                            <td>
                                <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
                            </td>
                            <td>
                                <p><img src="https://images.unsplash.com/profile-1495388545592-e4e376925c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=12ae79a24d842721d9a2e3969a24c1f8"></p>
                            </td>
                        </tr>
                    </table>
                </td>
                <td id="colee_right2" valign="top"></td>
            </tr>
        </table>
    </div>
    <script>
    var speed = 30 //速度数值越大速度越慢
    var colee_right2 = document.getElementById("colee_right2");
    var colee_right1 = document.getElementById("colee_right1");
    var colee_right = document.getElementById("colee_right");
    colee_right2.innerHTML = colee_right1.innerHTML

    function Marquee4() {
        if (colee_right.scrollLeft <= 0)
            colee_right.scrollLeft += colee_right2.offsetWidth
        else {
            colee_right.scrollLeft--
        }
    }
    var MyMar4 = setInterval(Marquee4, speed)
    colee_right.onmouseover = function() { clearInterval(MyMar4) }
    colee_right.onmouseout = function() { MyMar4 = setInterval(Marquee4, speed) }
    </script>
    <!--向右滚动代码结束-->
</body>

</html>