横纵方向走马灯滚动，纯javascript代码

最新推荐文章于 2024-05-24 13:39:19 发布

weixin_30321449

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量58

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pegasus827/p/4775138.html

版权

<body οnlοad="beginmarquee()">
<table width="1024" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200"><div id="demo" style="overflow:hidden;width:200px; height:100px">
        <div id="demo1">
        <img src="1.jpg" width="200" height="200" />
        <img src="2.jpg" width="200" height="200" />
        <img src="3.jpg" width="200" height="200" />
        <img src="4.jpg" width="200" height="200" />
        <img src="5.jpg" width="200" height="200" />
        <img src="6.jpg" width="200" height="200" />
        </div>   
        <div id="demo2"></div> 
    </div></td>
    <td>&nbsp;</td>
  </tr>
</table>
<div id="showtest">此处显示  id "showtest" 的内容</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
                <script>
var speed=12
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
{
demo.scrollTop++
}
}

var MyMar
function beginmarquee()
{
  MyMar=setInterval(Marquee,speed)
}

function endmarquee()
{
 clearInterval(MyMar)
}

//var MyMar=setInterval(Marquee,speed)
//demo.οnmοuseοver=function() {clearInterval(MyMar)}
//demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
              </script> 
</body>










<body>
<style type="text/css">
<!--
.zhengti{width:969px; height:180px; background-image:url(c-gd.gif);}
#demo {overflow:hidden;border: 1px dashed #CCC; width:920px; margin-left:25px; padding-top:18px;}
#demo img {border: 1px solid #F2F2F2;}
#indemo {float: left;width: 800%;}
#demo1 {float: left;}
#demo2 {float: left;margin-left:8px;}
-->
</style>
<div class="zhengti">
    <div id="demo">
        <div id="indemo">
            <div id="demo1">
            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>
            <a href="#"><img src="shiyan.jpg" border="0" height="140"/></a>
            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>
            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>
            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>
            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>
            </div>
            <div id="demo2"></div>
        </div>
    </div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
 if(tab2.offsetWidth-tab.scrollLeft<=0)
 tab.scrollLeft-=tab1.offsetWidth
 else{
 tab.scrollLeft++;
 }
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>

横纵方向走马灯滚动，纯javascript代码

转载于:https://www.cnblogs.com/pegasus827/p/4775138.html

weixin_30321449

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
横纵方向走马灯滚动，纯javascript代码

<body onload="beginmarquee()"><table width="1024" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200"><div id="demo" style="overflow:hidden;wid...
复制链接

扫一扫