JSP用marquee实现无缝滚动,下面的语句第一张图片滚出去马上又重新开始...

发布网友 发布时间：2022-04-28 16:41

我来回答

共1个回答

热心网友 时间：2022-04-19 07:33

<!--这是我以前用的js写的无缝滚动js代码，就是将要滚动内容复制成两份，开始一份看得见，一份看不见，然后容器通过改写 scrollLeft达到滚动效果，滚动了一份的宽度后有设置退回到原先的样子，建议不要用marquee，实现不了无缝-->

<div id="demo" style="width:1350px;overflow:hidden;height:250px;">

<div id="demo1" style="width:9999px;height:250px;white-space:nowrap;">

<div id="pahover2" style="width:260px;margin:auto 5px auto 5px;float:left;">

<a href="tw.php?lc_id=18">

<div style="background:#ffffff;border:2px solid #004f06;width:100%;height:200px;">

<img src="uploadfile/image/20140711/20140711025718_75516.png" style="width:248px;height:186px;margin:5px auto auto 5px;" />

</div>

<div id="hover2" style="border:2px solid #004f06;width:100%;height:25px;line-height:25px;text-align:center;position:relative;top:5px;">领导视察</div>

</a>

</div>

<div id="pahover2" style="width:260px;margin:auto 5px auto 5px;float:left;">

<a href="tw.php?lc_id=19">

<div style="background:#ffffff;border:2px solid #004f06;width:100%;height:200px;">

<img src="uploadfile/image/20140711/20140711025737_78068.png" style="width:248px;height:186px;margin:5px auto auto 5px;" />

</div>

<div id="hover2" style="border:2px solid #004f06;width:100%;height:25px;line-height:25px;text-align:center;position:relative;top:5px;">经销商参观</div>

</a>

</div>
</div>
</div>

<script>

var speed=15 ;
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");

demo1.innerHTML+=demo1.innerHTML;// file://克隆demo1为demo2
function Marquee(){
if(demo.offsetWidth<=demo.scrollLeft) //file://当滚动至demo1与demo2交界时
demo.scrollLeft=0;// file://demo跳到最顶端
else{
demo.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed) ;// file://设置定时器
demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
</script>