**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)
? **
? **实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，
? **通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，
? **因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 |
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"> <head?id="Head1"?runat="server"> ??<title></title> </head> <body> ??<img?src="link.gif"?style="cursor:?pointer"?onmouseover="clearright();toleft()"?/> ??<img?src="link1.gif"?style="cursor:?pointer"?onmouseover="clearleft();toright()"?/> ??<div> ????<div?id="demo"?style="overflow:?hidden;?width:?322px;?height:?61px"> ??????<table?cellpadding="0"?align="left"?border="0"?cellspace="0"> ????????<tbody> ??????????<tr> ????????????<td?id="demo1"?valign="top"> ??????????????<table?cellspacing="0"?cellpadding="0"?width="322"?bgcolor="#fffbf7"?border="0"> ????????????????<tbody> ??????????????????<tr?align="center"> ????????????????????<td?width="50"?height="50"> ??????????????????????<img?height="50"?src="link.gif"?/> ????????????????????</td> ????????????????????<td?width="50"?height="50"> ??????????????????????<img?height="50"?src="link1.gif"?/> ????????????????????</td> ????????????????????<td?width="50"?height="50"> ??????????????????????<img?height="50"?src="link2.gif"?/> ????????????????????</td> ????????????????????<td?width="50"?height="50"> ??????????????????????<img?height="50"?src="link.gif"?/> ????????????????????</td> ????????????????????<td?width="50"?height="50"> ??????????????????????<img?height="50"?src="link3.gif"?/> ????????????????????</td> ??????????????????</tr> ????????????????</tbody> ??????????????</table> ????????????</td> ????????????<td?id="demo2"?valign="top"> ????????????</td> ??????????</tr> ????????</tbody> ??????</table> ????</div> ??</div> ??<div> ????<div?id="demo_a"?style="overflow:?hidden;?width:?322px;?height:?61px"> ??????<table?cellpadding="0"?align="left"?border="0"?cellspace="0"> ????????<tbody> ??????????<tr> ????????????<td?id="demo_b"?valign="top"> ??????????????<table?cellspacing="0"?cellpadding="0"?width="322"?bgcolor="#fffbf7"?border="0"> ????????????????<tbody> ??????????????????<tr?align="center"> ????????????????????<td?width="50"?height="50"> ??????????????????????<img?height="50"?src="link.gif"?/> ????????????????????</td> ????????????????????<td?width="50"?height="50"> ??????????????????????<img?height="50"?src="link1.gif"?/> ????????????????????</td> ????????????????????<td?width="50"?height="50"> ??????????????????????<img?height="50"?src="link2.gif"?/> ????????????????????</td> ????????????????????<td?width="50"?height="50"> ??????????????????????<img?height="50"?src="link.gif"?/> ????????????????????</td> ????????????????????<td?width="50"?height="50"> ??????????????????????<img?height="50"?src="link3.gif"?/> ????????????????????</td> ??????????????????</tr> ????????????????</tbody> ??????????????</table> ????????????</td> ????????????<td?id="demo_c"?valign="top"> ????????????</td> ??????????</tr> ????????</tbody> ??????</table> ????</div> ??</div> ??<script?type="text/javascript"> ??/* ??**兼容IE,Firefox?遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动) ??** ??**实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆， ??**通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置， ??**因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。 ??*/ ??var?speed1=0????//图片左移的速度 ??var?MyMar1????//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片) ??var?MyMar2????//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片) ??var?lefthit=0????????//记录左移按钮点击次数 ??var?righthit=0????////记录右移按钮点击次数? ??//调用右移方法前,先让左移停止（clearInterval清除setInterval对方法的调用） ??function?clearleft(){ ??????clearInterval(MyMar1) ??????clearInterval(MyMar2) ??} ??//图片左移的方法 ??function?toleft(){ ????????//判断是否是第一次按下左移按钮（图片往左开始移动的时候，不会在调用此方法。只有当按了右移按钮时，才会把lefthit重设为0） ??????if(lefthit==0){ ??????????speed1=30;//图片左移速度时间毫秒 ??????????//让的内容demo2与demo1内容一样 ??????????document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML ??????????//上行图片移动的方法 ??????????function?Marquee1(){ ????????????????//当demo滚动至demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等 ??????????????if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0){ ??????????????????//demo跳回初始位置 ??????????????????document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth ??????????????} ??????????????else{ ??????????????????//demo开始重新移动 ??????????????????document.getElementById("demo").scrollLeft++ ??????????????} ??????????} ??????????//setInterval让Marquee1方法每隔多少秒执行一次，并把返回的调用次数ID ??????????MyMar1=setInterval(Marquee1,speed1) ??????????//当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时，第一行和第二行的图片都会停止 ??????????document.getElementById("demo").onmouseover=function() ??????????{clearInterval(MyMar1);clearInterval(MyMar2)} ??????????//当鼠标移除demo时,重新setInterval让方法执行，这样图片会继续移动 ??????????document.getElementById("demo").onmouseout=function() ??????????{MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)} ????????????//下面的方法与上面的方法一样，用于第二行的图片向左移动 ????????????document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML ??????????function?Marquee2(){ ??????????????if(document.getElementById("demo_c").offsetWidth-document.getElementById("demo_a").scrollLeft<=0){ ??????????????????document.getElementById("demo_a").scrollLeft-=document.getElementById("demo_b").offsetWidth} ??????????????else{ ??????????????????document.getElementById("demo_a").scrollLeft++ ??????????????} ??????????} ??????????MyMar2=setInterval(Marquee2,speed1) ??????????document.getElementById("demo_a").onmouseover=function() ??????????{clearInterval(MyMar2);clearInterval(MyMar1)} ??????????document.getElementById("demo_a").onmouseout=function() ??????????{MyMar2=setInterval(Marquee2,speed1);?document.getElementById("demo").onmouseout()} ??????????lefthit=1????????//设置左移按钮，当按了一次左移后(不管按多少次)，在没按右移按钮之前，toleft方法里的的代码不会再被执行 ??????????righthit=0????//把右移按钮设为0,这样当下次点了右移按钮的时候，以便toright方法被调用 ??????} ??} ??var?MyMar3????//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片) ??var?MyMar4????//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片) ??var?speed2=0????//图片右移的速度 ??//调用移左方法前,先让右移停止（clearInterval清除setInterval对方法的调用） ??function?clearright(){ ??????clearInterval(MyMar3) ??????clearInterval(MyMar4) ??} ??//图片右移方法(与图片左移方法思路一样) ??function?toright(){ ?????????//判断是否是第一次按下右移按钮（图片往右开始移动的时候，不会在调用此方法。只有当按了左移按钮时，才会把righthit重设为0） ??????if(righthit==0){ ??????????speed2=30; ??????????document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML ??????????function?Marquee_a(){ ??????????????if(document.getElementById("demo").scrollLeft<=0){ ??????????????????document.getElementById("demo").scrollLeft=document.getElementById("demo2").offsetWidth ??????????????} ??????????????else{ ??????????????????document.getElementById("demo").scrollLeft-- ??????????????} ??????????} ??????????MyMar3=setInterval(Marquee_a,speed2) ??????????document.getElementById("demo").onmouseover=function() ??????????{clearInterval(MyMar3);document.getElementById("demo_a").onmouseover()} ??????????document.getElementById("demo").onmouseout=function() ??????????{MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)} ??????????document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML ??????????function?Marquee_b(){ ??????????????if(document.getElementById("demo_a").scrollLeft<=0){ ??????????????????document.getElementById("demo_a").scrollLeft=document.getElementById("demo_c").offsetWidth ??????????????} ??????????????else{ ??????????????????document.getElementById("demo_a").scrollLeft-- ??????????????} ??????????} ??????????MyMar4=setInterval(Marquee_b,speed2) ??????????document.getElementById("demo_a").onmouseover=function() ??????????{clearInterval(MyMar4);clearInterval(MyMar3)} ??????????document.getElementById("demo_a").onmouseout=function() ??????????{MyMar4=setInterval(Marquee_b,speed2);document.getElementById("demo").onmouseout()} ??????????righthit=1????//设置右移按钮，当按了一次右移按钮后(不管按多少次)，在没按左移按钮之前，toright方法里的的代码不会再被执行 ??????????lefthit=0????//把左移按钮设为0,这样当下次点了左移按钮的时候，以便toleft方法被调用 ??????} ??} ??</script> </body> </html> |
转自：http://www.cnblogs.com/tearer/archive/2010/09/18/1830289.html
非常感谢这篇文章的作者，因为是好用的，而且也帮到我的忙，衷心的感谢 O(∩_∩)O，我是做了一点修改，把
|
1 2 |
<img?src="link.gif"?style="cursor:?pointer"?onmouseover="clearright();toleft()"?/> <img?src="link1.gif"?style="cursor:?pointer"?onmouseover="clearleft();toright()"?/> |
这两行去掉了，然后在body里加上
|
1 |
onload="clearright();toleft()" |