除了html<marquee>标签实现网页上面的滚动效果外,我们还可以自己量身定制一个滚动效果,其实很简单,用定时器(setInterval)即可简单实现。
实现思路是:1.触发实现 2.实现定时 3.判断条件并执行
滚动文字示例代码:
1 <html> 2 <head> 3 <title>滚动文字</title> 4 <style type="text/css"> 5 .divOuter 6 { 7 position:relative; 8 width:600px; 9 height:250px; 10 margin-left:340px; 11 margin-top:200px; 12 font-size:20px; 13 border:2px solid #FF9933; 14 } 15 .divInner 16 { 17 position:relative; 18 width:80px; 19 height:42px; 20 margin-top:100px; 21 } 22 </style> 23 <script type="text/javascript"> 24 25 function moveWords() 26 { 27 28 setInterval(changeLocation,10); 29 } 30 31 function changeLocation() 32 { 33 34 var outerDiv = document.getElementById("outerId"); 35 36 var innerDiv = document.getElementById("innerId"); 37 38 var outerWidth = outerDiv.clientWidth - innerDiv.clientWidth + "px"; 39 40 if(innerDiv.style.left == outerWidth) 41 { 42 43 innerDiv.style.left = 0 + "px"; 44 } 45 else 46 { 47 48 innerDiv.style.left = innerDiv.offsetLeft + 1 + "px"; 49 } 50 } 51 </script> 52 </head> 53 <body onload="moveWords()"> 54 <div id="outerId" name="frameDiv" class="divOuter"> 55 <div id="innerId" class="divInner"> 56 滚动文字 57 <br /> 58 滚动文字 59 </div> 60 </div> 61 </body> 62 </html>
当然本处只是以文字为例,<div id="innerId" class="divInner"> 中还可以替换为别的元素,但效果是不变的。