无间滚动效果
刚给公司做前台效果的时候做的,也还不错,大家看下吧
实现效果的代码如下:
<div id=demo style="OVERFLOW: hidden; WIDTH: 580px; align: center"> <table border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#ECE9D8"> <tbody> <tr bgcolor="#FFFFFF"> <td valign="top" id="marquePic1"> <table width="600" height="130" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="300" align="center">滚动内容一</td> <td width="300" align="center">滚动内容二</td> </tr> </table> </td> <td valign="top" id="marquePic2"></td> </tr> </tbody> </table> </div> <script type=text/javascript> var speed=30 marquePic2.innerHTML=marquePic1.innerHTML function Marquee(){ if(demo.scrollLeft>=marquePic1.scrollWidth){ demo.scrollLeft=0 }else{ demo.scrollLeft++ }} var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> |
滚动的内容全部包含在层DIV中,其ID=DEMO,此ID在层之后的JS控制代码中用到,所以不能乱写。
在这里,滚动的内容包含在一个一行两列的表格中,左边的一列,单元格ID为marquePic1,右边的一列,单元格ID为marquePic2,这两个ID也出现在其后的JS控制代码里,所以也不能乱写!
变化的内容包含在单元格marquePic1中,可以在其内包含表格,层或者其他静态、动态内容,一般情况下,只要是把要滚动出现的内容放置在marquePic1中即可实现这些内容循环水平滚动。
可以很容易的控制滚动的速度,一看就知道,speed=30是用来控制滚动速度的!
但是这里有两个个要注意的地方:
1、滚动区域的宽度只能用固定的宽度表示方法。
这个宽度由DIV来控制,在上面的例子中,宽度为580像素,如果想要这个层的宽度完美占满某个包含这个层的表格或层的宽度,一般会想到将宽度值改为100%,但是,经过本人多次测试,这种操作是行不通的,将滚动的层的宽度值直接改为100%,不能实现滚动效果!这应该算是该特效的不足之处吧,希望以后能设计出根据宽度自动调整的无限循环的无间隙滚动区域效果。
2、需要滚动的内容合起来的宽度应该大于DIV的宽度,否则,根据控制代码的含义,由于被滚动的表格是循环出现的,那么当DIV宽度内同时出现两个marquePic2时,滚动将停止!这一点,当滚动的内容是动态生成的话,当数据库中的记录比较多的时候,问题自动解决。
版权声明:
作者:xiaoniba
链接:https://blog.xiaoniba.com/2007/11/11/%e6%97%a0%e9%97%b4%e6%bb%9a%e5%8a%a8%e6%95%88%e6%9e%9c/
来源:小泥吧的博客
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论