1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #box{
8 width: 200px;
9 height: 200px;
10 border: 1px solid black;
11 position: absolute;
12 left:200px;
13 top: 200px;
14 overflow: hidden;
15 }
16
17 </style>
18 </head>
19 <body>
20 <!--<div id="toast" style="position: absolute; left: 300px; top: 400px;">滚动文字</div>-->
21
22
23 <div id = "box">
24 <ul id="toast">
25 <li>向上滚动</li>
26 <li>向上滚动</li>
27 <li>向上滚动</li>
28 <li>向上滚动</li>
29 <li>向上滚动</li>
30 <li>向上滚动</li>
31 <li>向上滚动</li>
32 <li>向上滚动</li>
33 <li>向上滚动</li>
34 <li>向上滚动</li>
35 <li>向上滚动</li>
36 </ul>
37 </div>
38 </body>
39 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
40 <script>
41 //滚动文字
42 // var oToast = document.getElementById("toast");
43 // setInterval(function(){
44 //
45 // var x = oToast.offsetLeft - 5;
46 // if (x < 0) {
47 // x = 300;
48 // }
49 // oToast.style.left = x + "px";
50 //
51 // }, 50);
52
53
54
55 $(function () {
56 setInterval(function () {
57 $('#toast').offset(function (n, c) {
58 newPos = new Object;
59 newPos.top = c.top - 5;
60
61 if(newPos.top < 0) {
62 newPos.top = 400;
63 }
64 return newPos;
65
66 })
67 },100)
68 })
69
70
71 </script>
72
73 </html>
