当前位置：首页 -> 技术开发 -> JSP专区 -> 教你用Javascript制作连续滚动的字幕

教你用Javascript制作连续滚动的字幕

时间： 2021-07-31 作者：daque

咱们普遍都用marquee标签遏制元素的震动。然而单向的marquee震动是不贯串的，每滚完一幕，就会展示一次空缺。而底下引见中的震动则是贯串的，绝不中断。　　底下小阳为你引见这是怎样实行的。

　　为了震动不妨“贯串”，咱们须要将字幕的实质复制多遍，直到实质的莫大不小于滚动区莫大的两倍。而后咱们将溢出的震动条湮没掉，用代码遏制震动条向下挪动(这时候实质将进取挪动)。当震动条震动到最下方时，表面上不许再往下震动了，所以咱们连忙安排震动条，将它进取震动到一个和暂时画面一律的场所。截止咱们看到的即是贯串的震动了。呵呵，说的即是这么大略，那做起来怎样呢？咱们看看是怎样渐渐实行的。

＜div id="marquees"> ＜!-- 那些是字幕的实质，你不妨大肆设置 --> ＜a href="#">链接一＜/a>＜br> ＜a href="#">链接二＜/a>＜br> ＜a href="#">链接三＜/a>＜br> ＜a href="#">链接四＜/a>＜br> ＜!-- 字幕实质中断 -->＜/div> ＜!-- 以次是java-script代码 -->＜script language="java-script">＜!--marqueesheight=200; //实质区莫大stopscroll=false; //这个变量遏制能否遏止震动with(marquees){nowrap=true; //这句表实质区不机动换行style.width=0; //所以咱们不妨将它的宽窄设为0，由于它会被撑大style.height=marqueesheight;style.overflowy="hidden"; //震动条不看来onmouseover=new function("stopscroll=true"); //鼠标过程，遏止震动onmouseout=new function("stopscroll=false"); //鼠标摆脱，发端震动}//这功夫，实质区的莫大是没辙读取了。底下输入一个不看来的层"templayer"，稍后将实质复制到内里：document.write('＜div id="templayer"style="position:absolute;z-index:1;visibility:hidden">＜/div>');function init(){ //初始化震动实质//屡次复制原实质到"templayer"，直到"templayer"的莫大大于实质区莫大：while(templayer.offsetheight＜marqueesheight){templayer.innerhtml+=marquees.innerhtml;} //把"templayer"的实质的“两倍”复制回原实质区：marquees.innerhtml=templayer.innerhtml+templayer.innerhtml;//树立贯串超时，挪用"scrollup()"因变量启动震动条：setinterval("scrollup()",10);}document.body.onload=init;pretop=0; //这个变量用来确定震动条能否仍旧到了极端function scrollup(){ //震动条的启动因变量if(stopscroll==true) return; //即使变量"stopscroll"为真，则遏止震动 pretop=marquees.scrolltop; //记载震动前的震动条场所marquees.scrolltop+=1; //震动条向下挪动一个像素//即使震动条不动了，则进取震动到和暂时画面一律的场所//固然不只如许，同样还要向下震动一个像素(+1)：if(pretop==marquees.scrolltop){marquees.scrolltop=templayer.offsetheight-marqueesheight+1;}}-->＜/script>　　如许就实行了，发觉做起来也不难吧。

教你用Javascript制作连续滚动的字幕

相关推荐

推荐下载

热门阅览

最新排行