javascript实现文字图片滚动示例

除了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"> 中还可以替换为别的元素，但效果是不变的。