关于marquee无缝循环

<DIV class="bar1">
<h3>组内成员</h3>
                <div  id="div1" style="BACKGROUND: #ffffff; OVERFLOW: hidden; WIDTH: 300px; COLOR: #0000ff; HEIGHT: 200px">
<div id="div2" >
              //为什么用表格就不好使呢？？
              
  <table align="center" height="200">
    <a href="pgmdetail.php?id={#$ID.id#}">
      <tr align="center" >
        <td width="115"><img src="man/image/{#$ID.photo#}" width="75" height="70" /></td>
        <td width="42">{#$ID.name#}</td>
        <td width="70">{#$ID.unit#}</td>
        </tr>
      </a>
      </table>
<br>
                  </div>
   <div id="div3"></div>
</div>
          <DIV class="clear"></DIV>
                <DIV class="barBottom"></DIV>
         </DIV>
<script language="javascript">
//div1 为最外层的层;table1为内容;table2为空表
var speed=30;
//var div1 = document.getElementById('div1');
//var div2 = document.getElementById('div2');
//var div3 = document.getElementById('div3');
div3.innerHTML=div2.innerHTML;
//alert(table1.offsetHeight);
function Marquee()
{
     if(div3.offsetTop-div1.scrollTop<=0)//189-0
{
         div1.scrollTop-=div2.offsetHeight;
//alert(div1.scrollTop);
     }
    else
{
         div1.scrollTop++;
     }
}
var MyMar=setInterval(Marquee,speed);
div1.onmouseover=function() {clearInterval(MyMar)};
div1.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>
div2里的内容为什么是表格就不好使呢，要是图片就好使~

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
    <title></title>
    <script language="javascript" type="text/javascript">
        function VScrollPanel() {
            this.width = null;
            this.height = null;
            this.delay = 100;
            this.step = 1;
        }
        VScrollPanel.prototype = {
            Bind: function (domID) {
                this.dom = document.getElementById(domID);
                if (this.width) {
                    this.dom.style.width = this.width + "px";
                }
                if (this.height) {
                    this.dom.style.height = this.height + "px";
                }
                this.dom.style.overflow = "hidden";                this.Scrolling();
            },
            Scrolling: function () {
                if (this.dom.scrollHeight <= this.dom.clientHeight) return;
                if (this.willSwap) {
                    this.dom.appendChild(this.lastOne);
                    this.willSwap = false;
                }
                var _this = this;
                this.dom.scrollTop += this.step;
                if (this.dom.scrollTop + this.dom.clientHeight
                    >= this.dom.scrollHeight) {//到达底部
                    if (this.tmp != null) this.dom.removeChild(this.tmp);
                    this.lastOne = this.dom.firstChild;
                    this.tmp = this.lastOne.cloneNode(true);
                    this.lastOne.replaceNode(this.tmp);
                    this.willSwap = true;
                }
                setTimeout(function () { _this.Scrolling(); }, this.delay);
            },
            Pause: function () {
                this.pauseStep = this.step;
                this.step = 0;
            },
            Continue: function () {
                this.step = this.pauseStep;
            }
        };        /*经过多次实验，水平滚动通过新建一个表格来设置布局
        才能最有效的保证布局不会乱，不会发生换行
        所以只好水平、垂直滚动的分开做了*/
        function HScrollPanel() {
            this.width = null;
            this.height = null;
            this.delay = 100;
            this.step = 1;
        }
        HScrollPanel.prototype = {
            Bind: function (domID) {
                this.dom = document.getElementById(domID);
                this.rootDom = document.createElement("table");
                this.rootDom.border = "0";
                this.rootDom.cellPadding = "0";
                this.rootDom.cellSpacing = "0";
                var tbody = document.createElement("tbody");
                this.rootDom.appendChild(tbody);
                this.row = document.createElement("tr");
                tbody.appendChild(this.row);                var child = this.dom.firstChild;
                while (child != null) {
                    this.dom.removeChild(child);
                    if (child.nodeType == 1) {
                        var td = document.createElement("td");
                        td.vAlign = "top";
                        td.appendChild(child);
                        this.row.appendChild(td);
                    }
                    child = this.dom.firstChild;
                }
                this.dom.appendChild(this.rootDom);                if (this.width) {
                    this.dom.style.width = this.width + "px";
                }
                if (this.height) {
                    this.dom.style.height = this.height + "px";
                }
                this.dom.style.overflow = "hidden";
                this.Scrolling();
            },
            Scrolling: function () {
                if (this.dom.scrollWidth <= this.dom.clientWidth) return;
                if (this.willSwap) {
                    this.row.appendChild(this.lastOne);
                    this.willSwap = false;
                }
                var _this = this;
                this.dom.scrollLeft += this.step;
                if (this.dom.scrollLeft + this.dom.clientWidth
                    >= this.dom.scrollWidth) {
                    if (this.tmp != null) {
                        this.row.removeChild(this.tmp);
                    }
                    this.lastOne = this.row.firstChild;
                    this.tmp = this.lastOne.cloneNode(true);
                    this.lastOne.replaceNode(this.tmp);
                    this.willSwap = true;
                }
                setTimeout(function () { _this.Scrolling(); }, this.delay);
            },
            Pause: function () {
                this.pauseStep = this.step;
                this.step = 0;
            },
            Continue: function () {
                this.step = this.pauseStep;
            }
        };
    </script>
    <style type="text/css">
        body,td
        {
            font-family:"宋体";
            font-size:12px;
        }
        .item
        {
            width:150px;
            background-color:#f0f0f0;
            text-align:center;
            margin:5px;
            padding:3px;
        }
    </style>
</head>
<body>
垂直滚动示例
<div id="divVScroll" onmouseover="vsp.Pause();" onmouseout="vsp.Continue()">
    <div class="item">AAAAAA</div>
    <div class="item">BBBBBB</div>
    <div class="item">CCCCCC</div>
    <div class="item">DDDDDD</div>
    <div class="item">EEEEEE</div>
    <div class="item">FFFFFF</div>
    <div class="item">GGGGGG</div>
</div>
    <script language="javascript" type="text/javascript">
        var vsp = new VScrollPanel();
        vsp.height = 100;
        vsp.Bind("divVScroll");
    </script>
<br /><br />
水平滚动示例
<div id="divHScroll" onmouseover="hsp.Pause();" onmouseout="hsp.Continue()">
    <div class="item">AAAAAA</div>
    <div class="item">BBBBBB</div>
    <div class="item">CCCCCC</div>
    <div class="item">DDDDDD</div>
    <div class="item">EEEEEE</div>
    <div class="item">FFFFFF</div>
    <div class="item">GGGGGG</div>
</div>
    <script language="javascript" type="text/javascript">
        var hsp = new HScrollPanel();
        hsp.width = 400;
        hsp.delay = 10;
        hsp.Bind("divHScroll");
    </script>
</body>
</html>