+ -
当前位置:首页 → 问答吧 → 跨IE 678 和FF的图片不间断滚动还是找不到

跨IE 678 和FF的图片不间断滚动还是找不到

时间:2010-05-06

来源:互联网

跨IE 678 和FF的图片不间断滚动还是找不到   不光找不到,甚至说在IE8下测没问题,在IEtester下面测IE8也会出问题的情况也有

谁有比较好的跨浏览器的图片横向  丛向不间断滚动的,能拿出来分享一下吗?谢谢

用marquee还是不行啊。。。。。

作者: i113600343   发布时间: 2010-05-06

marquee FF 不认的吧。用flash 做滚动图片,多简单的

作者: isayno   发布时间: 2010-05-06

试试这个,中间有停顿的,不过你把延时改小点应该就行了,看看合适不,
<style>
body{font-size:12px;text-align:center;}
.clear{clear:both;}
.hotSP{clear:both;}
.hotSP .hotSPlist{border:1px solid #D4D4D4;border-top:none;}
.hotSP .hotSPlist ul{clear:both;margin:0;padding:0;}
.hotSP .hotSPlist li{padding:0px;float:left;text-align:center;width:85px;list-style-type:none;margin: 0;}
.hotSP .hotSPlist a{display:block;line-height:26px;text-align:center;color:#000000;}
.hotSP .hotSPlist img{display:block;border:1px solid #CCCCCC;margin-left:5px !important;margin-left:0px;}
</style>
<!--热门产品开始-->
    <div id=clk_rmcp>
    <div class="hotSP">
<div class="columnTitle"><div class="title">热门产品</div></div>
      
      <div class="hotSPlist">
<ul><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/25/240/5ae784.jpg"/></a>
<a href="#" target="_blank">包装袋</a></li>
<li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/23/61/f3e2b4.jpg"/></a>
<a href="#" target="_blank">环保茶叶包装</a></li>
<li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/21/398/1ba04e.jpg"/></a>
<a href="#" target="_blank">海胆礼盒</a></li>
<li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/20/412/c7555b.jpg"/></a>
<a href="#" target="_blank">比萨保温包</a></li>
<li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/17/950/aae896.jpg"/></a>
<a href="#" target="_blank">庭院灯</a></li></ul>
<script type="text/javascript">
var marqueeContent1=new Array(); //滚动公告
marqueeContent1[0]='<li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/21/375/af03a4.jpg" border="0" />红枣原浆</a></li><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/19/581/c28dea.jpg" border="0" />饮水设备</a></li><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/20/933/c57f15.jpg" border="0" />油压机</a></li><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/17/819/a9cf42.jpg" border="0" />迷你直升飞机</a></li><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/17/459/ebd0b1.jpg" border="0" />交直流电焊机</a></li>';
marqueeContent1[1]='<li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/17/458/565be1.jpg" border="0" />磁力泵</a></li><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/17/457/0b40af.jpg" border="0" />填料组件</a></li><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/17/456/53cd57.jpg" border="0" />尼龙件</a></li><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/17/455/8e8430.jpg" border="0" />软密封蝶阀</a></li><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/17/454/2c57ff.jpg" border="0" />女式毛衣</a></li>';
marqueeContent1[2]='<li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/17/451/02532b.jpg" border="0" />同步熔断机</a></li><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/17/448/2f03e9.jpg" border="0" />手提袋</a></li><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/21/164/8761dc.jpg" border="0" />水封截止阀</a></li><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/17/107/53674c.jpg" border="0" />三通调节阀</a></li><li><a href="#" target="_blank"><img src="http://img.cn.china.cn/qhimg/deal_img/80_80/0/17/102/fe0d21.jpg" border="0" />温控器</a></li>';
var marqueeInterval1=new Array(); //定义一些常用而且要经常用到的变量
var marqueeId1=0;
var marqueeDelay1=3000;
var marqueeHeight1=110;
//接下来的是定义一些要使用到的函数
function initMarquee1() {
var str1=marqueeContent1[0];
document.write('<div id=marqueeBox1 style="clear:both;overflow:hidden;height:'+marqueeHeight1+'px" onmouseover="clearInterval(marqueeInterval1[0])" onmouseout="marqueeInterval1[0]=setInterval(\'startMarquee1()\',marqueeDelay1)"><ul>'+str1+'</ul></div>');
marqueeId1++;
marqueeInterval1[0]=setInterval("startMarquee1()",marqueeDelay1);
}
function startMarquee1() {
var str1=marqueeContent1[marqueeId1];
marqueeId1++;
var m1=document.getElementById('marqueeBox1');
if(marqueeId1>=marqueeContent1.length) marqueeId1=0;
if(m1.childNodes.length==1) {
var nextLine1=document.createElement('ul');
nextLine1.innerHTML=str1;
m1.appendChild(nextLine1);
}
else {
var m1=document.getElementById('marqueeBox1');
m1.childNodes[0].innerHTML=str1;
m1.appendChild(m1.childNodes[0]);
m1.scrollTop=0;
}
clearInterval(marqueeInterval1[1]);
marqueeInterval1[1]=setInterval("scrollMarquee1()",13);
}
function scrollMarquee1() {
var m1=document.getElementById('marqueeBox1');
m1.scrollTop++;
if(m1.scrollTop%marqueeHeight1==(marqueeHeight1-1)){
clearInterval(marqueeInterval1[1]);
}
}
</script>
      <script type="text/javascript">initMarquee1();</script>
      <div class="clear"></div>
      </div>
    </div>
</div><!--热门产品结束--></font>

作者: faleshi   发布时间: 2010-05-06

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)-JS特效学院|JsWeb.Cn</title>
</head>
<body><!--下面是向上滚动代码-->
<div id=jsweb8_cn_top style=overflow:hidden;height:100;width:90;>
<div id=jsweb8_cn_top1>
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
</div>
<div id=jsweb8_cn_top2></div>
</div>
<script>
var speed=30
jsweb8_cn_top2.innerHTML=jsweb8_cn_top1.innerHTML //克隆jsweb8_cn_top1为jsweb8_cn_top2
function Marquee1(){
//当滚动至jsweb8_cn_top1与jsweb8_cn_top2交界时
if(jsweb8_cn_top2.offsetTop-jsweb8_cn_top.scrollTop<=0)   
jsweb8_cn_top.scrollTop-=jsweb8_cn_top1.offsetHeight //jsweb8_cn_top跳到最顶端
else{
jsweb8_cn_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
jsweb8_cn_top.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
jsweb8_cn_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
<!--向上滚动代码结束-->
<br>
<!--下面是向下滚动代码-->
<div id=jsweb8_cn_bottom style=overflow:hidden;height:100;width:90;>
<div id=jsweb8_cn_bottom1>
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
</div>
<div id=jsweb8_cn_bottom2></div>
</div>
<script>
var speed=30
jsweb8_cn_bottom2.innerHTML=jsweb8_cn_bottom1.innerHTML
jsweb8_cn_bottom.scrollTop=jsweb8_cn_bottom.scrollHeight
function Marquee2(){
if(jsweb8_cn_bottom1.offsetTop-jsweb8_cn_bottom.scrollTop>=0)
jsweb8_cn_bottom.scrollTop+=jsweb8_cn_bottom2.offsetHeight
else{
jsweb8_cn_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
jsweb8_cn_bottom.onmouseover=function() {clearInterval(MyMar2)}
jsweb8_cn_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
<!--向下滚动代码结束-->
<br>
<!--下面是向左滚动代码-->
<div id="jsweb8_cn_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="jsweb8_cn_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td><td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
</tr>
</table>
</td>
<td id="jsweb8_cn_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
jsweb8_cn_left2.innerHTML=jsweb8_cn_left1.innerHTML
function Marquee3(){
if(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft<=0)
jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidth
else{
jsweb8_cn_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
jsweb8_cn_left.onmouseover=function() {clearInterval(MyMar3)}
jsweb8_cn_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
<!--向左滚动代码结束-->
<br>
<!--下面是向右滚动代码-->
<div id="jsweb8_cn_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="jsweb8_cn_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
</tr>
</table>
</td>
<td id="jsweb8_cn_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
jsweb8_cn_right2.innerHTML=jsweb8_cn_right1.innerHTML
function Marquee4(){
if(jsweb8_cn_right.scrollLeft<=0)
jsweb8_cn_right.scrollLeft+=jsweb8_cn_right2.offsetWidth
else{
jsweb8_cn_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
jsweb8_cn_right.onmouseover=function() {clearInterval(MyMar4)}
jsweb8_cn_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<!--向右滚动代码结束-->
<p></p>
更多精彩尽在JS特效学院|<a href="http://www.jsweb8.cn"
target="_blank">www.jsweb8.cn</a>,转载请注明出处(JS特效学院)
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>

作者: faleshi   发布时间: 2010-05-07


<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)-JS特效学院|JsWeb.Cn</title> </head> <body> <!--下面是向上滚动代码--> <div id=jsweb8_cn_top style=overflow:hidden;height:100;width:90;> <div id=jsweb8_cn_top1> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> </div> <div id=jsweb8_cn_top2></div> </div> <script> var speed = 30 jsweb8_cn_top2.innerHTML = jsweb8_cn_top1.innerHTML //克隆jsweb8_cn_top1为jsweb8_cn_top2 function Marquee1(){ //当滚动至jsweb8_cn_top1与jsweb8_cn_top2交界时 if (jsweb8_cn_top2.offsetTop - jsweb8_cn_top.scrollTop <= 0) jsweb8_cn_top.scrollTop -= jsweb8_cn_top1.offsetHeight //jsweb8_cn_top跳到最顶端 else { jsweb8_cn_top.scrollTop++; } } var MyMar1 = setInterval(Marquee1, speed)//设置定时器 //鼠标移上时清除定时器达到滚动停止的目的 jsweb8_cn_top.onmouseover = function(){ clearInterval(MyMar1) } //鼠标移开时重设定时器 jsweb8_cn_top.onmouseout = function(){ MyMar1 = setInterval(Marquee1, speed) } </script> <!--向上滚动代码结束--> <br> <!--下面是向下滚动代码--> <div id=jsweb8_cn_bottom style=overflow:hidden;height:100;width:90;> <div id=jsweb8_cn_bottom1> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> <img src="http://jsweb8.cn/images/logo.gif"> </div> <div id=jsweb8_cn_bottom2></div> </div> <script> var speed = 30 jsweb8_cn_bottom2.innerHTML = jsweb8_cn_bottom1.innerHTML jsweb8_cn_bottom.scrollTop = jsweb8_cn_bottom.scrollHeight function Marquee2(){ if (jsweb8_cn_bottom1.offsetTop - jsweb8_cn_bottom.scrollTop >= 0) jsweb8_cn_bottom.scrollTop += jsweb8_cn_bottom2.offsetHeight else { jsweb8_cn_bottom.scrollTop-- } } var MyMar2 = setInterval(Marquee2, speed) jsweb8_cn_bottom.onmouseover = function(){ clearInterval(MyMar2) } jsweb8_cn_bottom.onmouseout = function(){ MyMar2 = setInterval(Marquee2, speed) } </script> <!--向下滚动代码结束--> <br> <!--下面是向左滚动代码--> <div id="jsweb8_cn_left" style="overflow:hidden;width:500px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td id="jsweb8_cn_left1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> </tr> </table></td> <td id="jsweb8_cn_left2" valign="top"></td> </tr> </table> </div> <script> var speed = 30//速度数值越大速度越慢 jsweb8_cn_left2.innerHTML = jsweb8_cn_left1.innerHTML function Marquee3(){ if (jsweb8_cn_left2.offsetWidth - jsweb8_cn_left.scrollLeft <= 0) jsweb8_cn_left.scrollLeft -= jsweb8_cn_left1.offsetWidth else { jsweb8_cn_left.scrollLeft++ } } var MyMar3 = setInterval(Marquee3, speed) jsweb8_cn_left.onmouseover = function(){ clearInterval(MyMar3) } jsweb8_cn_left.onmouseout = function(){ MyMar3 = setInterval(Marquee3, speed) } </script> <!--向左滚动代码结束--> <br> <!--下面是向右滚动代码--> <div id="jsweb8_cn_right" style="overflow:hidden;width:500px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td id="jsweb8_cn_right1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> <td><img src="http://jsweb8.cn/images/logo.gif"></td> </tr> </table></td> <td id="jsweb8_cn_right2" valign="top"></td> </tr> </table> </div> <script> var speed = 30//速度数值越大速度越慢 jsweb8_cn_right2.innerHTML = jsweb8_cn_right1.innerHTML function Marquee4(){ if (jsweb8_cn_right.scrollLeft <= 0) jsweb8_cn_right.scrollLeft += jsweb8_cn_right2.offsetWidth else { jsweb8_cn_right.scrollLeft-- } } var MyMar4 = setInterval(Marquee4, speed) jsweb8_cn_right.onmouseover = function(){ clearInterval(MyMar4) } jsweb8_cn_right.onmouseout = function(){ MyMar4 = setInterval(Marquee4, speed) } </script> <!--向右滚动代码结束--> <p></p> 更多精彩尽在JS特效学院|<a href="http://www.jsweb8.cn" target="_blank">www.jsweb8.cn</a>,转载请注明出处(JS特效学院) </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a& gt;
 提示:您可以先修改部分代码再运行

作者: jikeytang   发布时间: 2010-05-08

<marquee behavior=right onmouseover=this.stop() onmouseout=this.start() > <center></font>图片或者文字</marquee>
behavior=right 从右向左
            left 右向左
             up 向上。
最适用的代码

作者: sml2341919   发布时间: 2010-05-08