html5/css教程

javascript教程

asp教程

php教程

jsp教程

C#/.NET教程

Python教程

网络营销

建站经验

点击排行

您现在的位置:首页 > 网络教程 > html5

marquee无缝滚动代码实现

来源:中文源码网    浏览: 次    日期:2017年4月18日
<DIV id=demo_my style="OVERFLOW: hidden; WIDTH:380px; COLOR: #ffffff">
  <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
    <TBODY>
      <TR>
        <TD id=demo_my1 vAlign=top><table width="380" height="116"  border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td><img src="images/pro01.jpg" width="103" height="100"></td>
              <td><img src="images/pro02.jpg" width="103" height="100"></td>
              <td><img src="images/pro03.jpg" width="103" height="100"></td>
              <td><img src="images/pro04.jpg" width="103" height="100"></td>
              <td><img src="images/pro05.jpg" width="103" height="100"></td>
              <td><img src="images/pro06.jpg" width="103" height="100"></td>
              <td><img src="images/pro07.jpg" width="103" height="100"></td>
              <td><img src="images/pro08.jpg" width="103" height="100"></td>
              <td><img src="images/pro04.jpg" width="103" height="100"></td>
              <td><img src="images/pro05.jpg" width="103" height="100"></td>
              <td><img src="images/pro06.jpg" width="103" height="100"></td>
              <td><img src="images/pro07.jpg" width="103" height="100"></td>
              <td><img src="images/pro08.jpg" width="103" height="100"></td>
            </tr>
          </table></TD>
        <TD id=demo_my2 vAlign=top>&nbsp;</TD>
      </TR>
    </TBODY>
  </TABLE>
</DIV>
<script>
var speed3=25//速度数值越大速度越慢
demo_my2.innerHTML=demo_my1.innerHTML
function Marquee2(){
if(demo_my2.offsetWidth-demo_my.scrollLeft<=0)
demo_my.scrollLeft-=demo_my1.offsetWidth
else{
demo_my.scrollLeft++
}
}
var MyMar=setInterval(Marquee2,speed3)
demo_my.onmouseover=function() {clearInterval(MyMar)}
demo_my.onmouseout=function() {MyMar=setInterval(Marquee2,speed3)}
</script> 

  


 

亲,试试微信扫码分享本页! *^_^*

精彩推荐