HTML DOM innerHTML 属性及实现图片连续播放

定义和用法

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

语法

tablerowObject.innerHTML=HTML

实例

下面的例子返回了表格行的 inner HTML：

<html>
<head>
<script type="text/javascript">
function getInnerHTML()
  {
  alert(document.getElementById("tr1").innerHTML);
  }
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="getInnerHTML()" 
value="Alert innerHTML of table row" />

</body>
</html>

 




使用innerHTML 来实现图片的连续播放


 1 <script type=text/javascript> 
 2 var speed=30 
 3 marquePic2.innerHTML=marquePic1.innerHTML 
 4 function Marquee(){ 
 5 if(demo.scrollLeft>=marquePic1.scrollWidth){ 
 6 demo.scrollLeft=0 
 7 }
 8 else{ 
 9 demo.scrollLeft++ 
10 }} 
11 var MyMar=setInterval(Marquee,speed) 
12 demo.onmouseover=function() {clearInterval(MyMar)} 
13 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
14 </script>

 注：scrollLeft代表页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面的宽度;

      scrollWidth获取对象的滚动宽度;

      详细解释：http://bluenemo.iteye.com/blog/1263429

 1 <div id=demo style="OVERFLOW: hidden; WIDTH: 760px; align: center">
 2   <table cellspacing="0" cellpadding="0" align="center" 
 3 border="0">
 4     <tbody>
 5       <tr>
 6         <td id="marquePic1" valign="top">
 7         
 8 <table width="958" height="130" border="0" cellpadding="0" cellspacing="0">
 9   <tr>
10     <td width="95" height="110" align="center">1</td>
11     <td width="95" align="center">2</td>
12     <td width="95" align="center">3</td>
13     <td width="95" align="center">4</td>
14     <td width="95" align="center">5</td>
15     <td width="95" align="center">6</td>
16     <td width="95" align="center">7</td>
17     <td width="95" align="center">8</td>
18     <td width="95" align="center">9</td>
19     <td width="103" align="center">0</td>
20   </tr>
21   <tr>
22     <td height="20" align="center" bgcolor="#CCCCCC">&nbsp;</td>
23     <td align="center">&nbsp;</td>
24     <td align="center">&nbsp;</td>
25     <td align="center">&nbsp;</td>
26     <td align="center">&nbsp;</td>
27     <td align="center">&nbsp;</td>
28     <td align="center">&nbsp;</td>
29     <td align="center">&nbsp;</td>
30     <td align="center">&nbsp;</td>
31     <td align="center" bgcolor="#FFFF99">&nbsp;</td>
32   </tr>
33 </table>        
34         
35         </td>
36         <td id="marquePic2" valign="top"></td>
37       </tr>
38     </tbody>
39   </table>
40 </div>

 

posted @ 2015-01-13 22:21  disneyland  阅读(631)  评论(0)  编辑  收藏  举报