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

时间：2023-12-13 13:49:02

定义和用法

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 来实现图片的连续播放


 <script type=text/javascript>

 var speed=30

 marquePic2.innerHTML=marquePic1.innerHTML

 function Marquee(){

 if(demo.scrollLeft>=marquePic1.scrollWidth){

 demo.scrollLeft=0

 }

 else{

 demo.scrollLeft++

 }}

 var MyMar=setInterval(Marquee,speed)

 demo.onmouseover=function() {clearInterval(MyMar)}

 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

 </script>

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

      scrollWidth获取对象的滚动宽度;

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

 <div id=demo style="OVERFLOW: hidden; WIDTH: 760px; align: center">

   <table cellspacing="0" cellpadding="0" align="center"

 border="0">

     <tbody>

       <tr>

         <td id="marquePic1" valign="top">

 <table width="958" height="130" border="0" cellpadding="0" cellspacing="0">

   <tr>

     <td width="95" height="110" align="center">1</td>

     <td width="95" align="center">2</td>

     <td width="95" align="center">3</td>

     <td width="95" align="center">4</td>

     <td width="95" align="center">5</td>

     <td width="95" align="center">6</td>

     <td width="95" align="center">7</td>

     <td width="95" align="center">8</td>

     <td width="95" align="center">9</td>

     <td width="103" align="center">0</td>

   </tr>

   <tr>

     <td height="20" align="center" bgcolor="#CCCCCC">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center">&nbsp;</td>

     <td align="center" bgcolor="#FFFF99">&nbsp;</td>

   </tr>

 </table>        

         </td>

         <td id="marquePic2" valign="top"></td>

       </tr>

     </tbody>

   </table>

 </div>

相关文章