js左右无缝滚动 | 易学教程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
   function getObject(objectId) {
   if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
   } else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
   } else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
   } else {
return false;
   }
}
</script>

</head>
<div id="demo" style="overflow:hidden;height:50px;width:740px;text-align:center;margin:0px auto">
   <table width="740" height="55" cellpadding="0" cellspacing="0" align="center" style="border:0px solid #000">
    <tr>
     <td id="demo1" valign="top" aling="center">
  <table width="760" cellpadding="0" cellspacing="0" border="0">
   <tr>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo1.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo2.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo3.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo4.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo5.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo6.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo7.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo8.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo9.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo11.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo12.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo13.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo14.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo15.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo16.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo17.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo18.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo19.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
    <td><img src="http://images.zhaopin.com/new4/imagesrpo/logo20.gif" width="136" height="49" alt="" border="0" style="margin-right:5px" /></td>
   </tr>
  </table>
  </td>
     <td id="demo2" valign="top"></td>
    </tr>
   </table>
   </div>
   <script type="text/javascript">
var demo1 = getObject("demo1")
var demo2 = getObject("demo2")
    var demo = getObject("demo")

  var speed=30
demo2.innerHTML=demo1.innerHTML

function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>
<body>
</body>
</html>

来源：https://www.cnblogs.com/luluping/archive/2008/09/11/1288802.html

标签

border

margin

日剧

悬疑电视剧