当前位置：首页 -> 网页设计 -> 网页特效 -> 连续滚动的制作

连续滚动的制作

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

咱们普遍都用marquee标签遏制元素的震动。然而单向的marquee震动是不贯串的，每滚完一幕，就会展示一次空缺。而底下引见中的震动则是贯串的，绝不中断。　　底下小阳为你引见这是怎样实行的。　　为了震动不妨“贯串”，咱们须要将字幕的实质复制多遍，直到实质的莫大不小于震动区莫大的两倍。而后咱们将溢出的震动条湮没掉，用代码遏制震动条向下挪动（这时候实质将进取挪动）。当震动条震动到最下方时，表面上不许再往下震动了，所以咱们连忙安排震动条，将它进取震动到一个和暂时画面一律的场所。截止咱们看到的即是贯串的震动了。呵呵，说的即是这么大略，那做起来怎样呢？咱们看看是怎样渐渐实行的。<div id="marquees"><a href="#">链接一</a><br><br><a href="#">链接二</a><br><br><a href="#">链接三</a><br><br><a href="#">链接四</a><br><br></div>

<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>

　　如许就实行了，发觉做起来也不难吧。好了，进取震动的即是如许，向其它目标震动的就不必我引见了吧？

连续滚动的制作

相关推荐

推荐下载

热门阅览

最新排行