解决marquee空白问题

最新推荐文章于 2022-07-07 14:26:31 发布

diandu2747

最新推荐文章于 2022-07-07 14:26:31 发布

阅读量773

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sfmjp/articles/2765806.html

版权

本文提供了解决marquee在滚动时出现留白问题的代码示例，包括向上、向下、向左、向右四个方向的滚动效果实现。通过克隆内容并调整滚动位置，实现了无缝循环滚动。

摘要由CSDN通过智能技术生成

图片左右循环连续滚动代码，解决marquee的留白问题

向上：

</div>

</div>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight

else{

demo.scrollTop++

}

var MyMar=setInterval(Marquee,speed)

demo.οnmοuseοver=function(){clearInterval(MyMar)}

demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)}

</script>

===========================================================================================

向下：

</div>

</div>

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollTop=demo.scrollHeight

function Marquee(){

if(demo1.offsetTop-demo.scrollTop>=0)

demo.scrollTop+=demo2.offsetHeight

else{

demo.scrollTop--

}

var MyMar=setInterval(Marquee,speed)

demo.οnmοuseοver=function(){clearInterval(MyMar)}

demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)}

</script>

===========================================================================================

向左：

<tr>

</td>

</tr>

</table>

</div>

var speed=10

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

var MyMar=setInterval(Marquee,speed)

demo.οnmοuseοver=function(){

clearInterval(MyMar)

}

demo.οnmοuseοut=function(){

MyMar=setInterval(Marquee,speed)

}

</script>

==================================================================================

向右：

<tr>

</td>

</tr>

</table>

</div>

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollLeft=demo.scrollWidth

function Marquee(){

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

var MyMar=setInterval(Marquee,speed)

demo.οnmοuseοver=function() {clearInterval(MyMar)}

demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}

</script>

一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆副本，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的.

向上滚动：

<div id=demo style=overflow:hidden;height:100;width:90;

background:#214984;color:#ffffff>

</div>

</div>

<script>...

var speed=30

demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2

function Marquee()...{

//当滚动至demo1与demo2交界时

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端

else...{

demo.scrollTop++

}

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

//鼠标移上时清除定时器达到滚动停止的目的

demo.οnmοuseοver=function() ...{clearInterval(MyMar)}

//鼠标移开时重设定时器

demo.οnmοuseοut=function()...{MyMar=setInterval(Marquee,speed)}

</script>

向左滚动：

</tr>

</table>

</td>

</tr>

</table>

</div>

<script>...

var speed=1//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee()...{

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else...{

demo.scrollLeft++

}

var MyMar=setInterval(Marquee,speed)

demo.οnmοuseοver=function() ...{clearInterval(MyMar)}

demo.οnmοuseοut=function() ...{MyMar=setInterval(Marquee,speed)}

</script>

说明:

本例主要是对象属性中和滚动相关的几个属性的应用，各属性说明如下：

innerHTML 设置或获取位于对象起始和结束标签内的 HTML。

scrollHeight 获取对象的滚动高度。

scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。

scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

scrollWidth 获取对象的滚动宽度。

offsetHeight 获取对象相对于版面或由父坐标 offsetPar

转载于:https://www.cnblogs.com/sfmjp/articles/2765806.html