1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #box{ 8 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>