滚动文字 

 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>

 

posted @ 2017-09-04 09:26  铜镜123  阅读(114)  评论(0)    收藏  举报