网页内容左右不间断滚动代码

网页内容左右不间断滚动代码

<title>内容左右不间断滚动</title>
 <div id="demo" style="overflow:hidden;width:678px; height:105px;color:#ffffff" align="center">
    <div id="demo1">
    <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC" align="center">
    <tr>
    <td><a href="#" target="_blank"><img src="images/pdimages/g1.gif" width="150" height="105" border="0"></a></td>
    <td><a href="#" target="_blank"><img src="images/pdimages/g2.gif" width="150" height="105" border="0"></a></td>
 <td><a href="#" target="_blank"><img src="images/pdimages/g3.gif" width="150" height="105" border="0"></a></td>
    <td><a href="#" target="_blank"><img src="images/pdimages/g4.gif" width="150" height="105" border="0"></a></td>
    <td><a href="#" target="_blank"><img src="images/pdimages/g5.gif" width="150" height="105" border="0"></a></td>
    <td><a href="#" target="_blank"><img src="images/pdimages/g6.gif" width="150" height="105" border="0"></a></td>
    <td><a href="#" target="_blank"><img src="images/pdimages/g7.gif" width="150" height="105" border="0"></a></td>
    <td><a href="#" target="_blank"><img src="images/pdimages/g8.gif" width="150" height="105" border="0"></a></td>
    <td><a href="#" target="_blank"><img src="images/pdimages/g9.gif" width="150" height="105" border="0"></a></td>
  
  </tr>
</table>
 </div>
 <div id="demo2"></div>
    </div>

<script language="JavaScript">
var speed=80;
demo2.innerHTML=demo1.innerHTML; //克隆demo1为demo2

function Marquee(){
 if(demo2.offsetWidth  <= demo.scrollLeft){ //当滚动至demo1与demo2交界时
  demo.scrollLeft = demo.scrollLeft - demo1.offsetWidth;  //demo跳到最顶端
 }
 else{
  demo.scrollLeft++;
 }
}

var MyMar=setInterval(Marquee,speed); //设置定时器

demo.onmouseover=function() {clearInterval(MyMar);}//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}//鼠标移开时重设定时器
</script>

<div class="clear"></div> 
 </div>

</div></td>
  </tr>
</table>
 
 </td>
  </tr>
</table>

时间: 2024-09-20 11:35:35

网页内容左右不间断滚动代码的相关文章

三款文字不间断滚动代码

<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接1</a> <br> <a href="#">链接2</a> <br> <a href="#">链接3</a> <br> <a href="#">

js 图片无缝不间断滚动代码

改为--> 第1期 第2期 第3期 第4期 第5期 第6期 第7期 第8期 第9期 第10期

js图片左右不间断滚动代码

<div id=demo style="OVERFLOW: hidden; WIDTH: 960px; align: center"> <table cellspacing="0" cellpadding="0" align="center" border="0"> <tr> <td id="marquePic1" valign="to

js图片上下不间断滚动代码

<div id=link_logo style="OVERFLOW: hidden; WIDTH: 282px; HEIGHT: 518px"> <div id=link_logo1 style="OVERFLOW: hidden"> <table width="282"  border="0" cellpadding="10" cellspacing="0"

js不间断滚动的简单实现_javascript技巧

CSS: ul, li { margin: 0; padding: 0; } #scrollDiv { width: 300px; height: 25px; line-height: 25px; border-bottom: #4c8cd1 1px solid; overflow: hidden; } #scrollDiv li { height: 25px; padding-left: 10px; } JS: <script> function AutoScroll(obj) { $(ob

二款不间断向上滚动代码

<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff> <div id=demo1> <img src="/down/js/images/12460764740.jpg"> <img src="/12460764741.jpg"> <img src="/images/1246076

JS不间断滚动特效代码

 代码如下 复制代码 /*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.65*         应用说明:页面包含<script type="text/javascript" src="MSClass.js"></script>    创建实例:   //参数直接赋值法   new Marquee("marquee")   new Marquee("mar

实现网页内容水平或垂直滚动的Javascript代码_javascript技巧

主要两个部分,一.是滚动内容部分:二.JS的滚动代码部分,也只有两句话. 一.传统的滚动代码 用Javascript实现新闻内容的水平滚动! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 传统的滚动代码应用效果比较单一,而且经常还存在浏览器的兼容性问题,比如在FIREFOX上效果就会出现marquee的特效无效的问题. 二.Javascript实现的滚动效果 用Javascript实现新闻内容的水平滚动1 //div标签中的宽度width等参数可以自行调节 [Ctrl+A 全选 注

三款不间断向左滚动代码

<div id=demo style="overflow:hidden;width:750;" align=center> <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 > <tr><td valign=top bgcolor=ffffff id=marquepic1> <table width='100%' border='0' cells