一、循环向上滚动的文字，如上面的滚动效果

二、实现的思路

1、建立三个层穹顶、穹顶1、穹顶2、垂直滚动的文字在dome1上3、通过层的滚动来实现文字滚动

三、源代码

htmlheadtitle循环向上滚动的文字/title link href=' CSS/scrollTop。CSS ' rel='样式表type=' text/CSS '/headdydiv class=' domes ' div class=' dome _ top '近七日畅销榜/divdiv id='dome'div id='dome1 '表格宽度='100% '边框='0 '单元格间距='0 '单元格填充=' 0 ' trtdimg src=' http : images/scroll top _ 1。jpg ' alt=' scroll '/tddiv class=' title '社交疯狂项语/div font class=' price '57.00/font折扣：52折/TD/trtdimg src=' http : images/scroll top _ 2。jpg ' alt=' scroll '/tdtdtddiv class=' title '傲慢与偏见/div font class=' price '20.00/font折扣：25折/TD/trtdimg src=' http : images/scroll top _ 3。jpg ' alt=' scroll '/tdtdtddiv class=' title '玻璃鞋全集(50集34VCD)/div font class=' price '300.00/font折扣：52折/TD/trtdimg src=' http : images/scroll top _ 4。jpg ' alt=' scroll '/tdtdtddiv class=' title '澳大利亚：假日之旅/div font class=' price '53.00/font折扣：51折/TD/trtdimg src=' http : images/scroll top _ 5。jpg ' alt=' scroll '/tdtdtddiv class=' title '浪漫地中海：假日之旅/div font class=' price ' 80.00/font折扣：52折/TD/trtdimg src=' http : images/scroll top _ 6。jpg ' alt=' scroll '/tdtdtddiv class=' title '老人与海/div font class=' price ' 57.00/font折扣：52折/TD/trtdimg src=' http : images/scroll top _ 7。jpg ' alt=' scroll '/tdtdtddiv class=' title '欧陆风情：假日之旅/div font class=' price ' 53.00/font折扣：52折/TD/tr/table/div div id=' dome 2 '/div/div/div脚本src=' http : js/scrollTop。js ' type=' text/JavaScript '/script/body/html四、设置编号为圆屋顶的层的差异源代码

# dome { overflow:hidden/*溢出的部分不显示*/高度：180 pxpadding:5px }五、实现循环向上滚动的Java脚本语言代码

function $(element){返回文档。getelementbyid(元素)；} var dome=$(' dome ')；var圆顶1=$('圆顶1 ')；var圆顶2=$('圆顶2 ')；变速=50;//设置向上滚动速度穹顶2。InnerHTMl=dome 1。InnerHTMl//复制dome1为圆顶2功能移动顶部(){ if(圆顶2。偏移圆顶。滚动顶部=0)//当滚动至dome1与dome2交界时穹顶。滚动顶部-=圆顶1。偏移心形//圆顶跳到最顶端else { dome。滚动顶部} } var MyMar=设置间隔(移动顶部，速度)//设置定时器穹顶。onmouseover=function(){ clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的穹顶。onmouseout=function(){ MyMar=set interval(移动顶部，速度)} //鼠标移开时重设定时器，继续滚动以上这篇Java脚本语言实现垂直向上无缝滚动特效代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。