原生射流研究…实现水平方向无缝滚动

水平方向无缝滚动

滚动支持图片，文字原理：一个大的盒子中放置两个盒子，通过设置在中间，滚动的关系来实现，而且还用到定时器函数setInterval，当手指移动上去定义滚动，离开继续滚动。兼容各大浏览器HTML。代码

div id=' demo ' div id=' demo in ' div id=' demo 1 ' a href=' '测试文字1/a a href=' '测试文字2/a a href=' '测试文字3/a a href=' '测试文字4/a a href=' '测试文字5/a a href=' '测试文字7/a a href=' '测试文字8 a a href=' '测试文字9/a a href=' '测试文字10/a a href=' '测试文字11/a a href=' '测试文字12 a a href=' '测试文字13 a a href=' '测试文字14 a href=' '测试文字15 a a href=' '测试文字16 a a href=' '测试文字17/a/div id=' demo 2 '/div/div/div CSS代码

#演示{ width:1000px高度：30 px飞越：隐藏；线高：30 pxfont-size :13 px字体系列： '宋体；背景： # DDD网址(图片/通知。png)不重复25px中心；color : # 0c 77 cf font-weight :加粗；margin : 0 auto } # demoin { width : 900 pxh three : 30pxmargin : 0 auto white-space : nowrap；飞越：隐藏；} #演示#demo1，#演示#演示2 {显示：行内} JavaScript代码

窗户。onload=function(){ scrolleft()；};函数scrolleft(){ var speed=20；var tab=文档。getelementbyid('演示in ')；var标签1=文档。getelementbyid(' demo 1 ')；var选项卡2=文档。getelementbyid(' demo 2 ')；标签2。innerhtml=选项卡1。innerhtml函数Marquee(){ if(tab 2。offsetwithts-tab。scrolleft=0){ tab。scrolleft=0；} else { tab . scrolleft } } var timer=setInterval(跑马灯，速度);选项卡。onmouseover=function(){ clearInterval(计时器);};选项卡。onmouseout=function(){ timer=setInterval(Marquee，speed)；} }效果图：

效果就是一直滚动。

注意：内容的宽度必须大于容器的宽度，否则无法滚动，测试文字一般是使用创建交互式、快速动态网页应用的网页开发技术后台获取。