JavaScript+div实现不间断向左滚动文字效果

最新推荐文章于 2021-06-29 14:39:53 发布

转载最新推荐文章于 2021-06-29 14:39:53 发布 · 546 阅读

文章标签：

本文介绍如何使用JavaScript创建一个连续向左滚动的文字效果，包括HTML、CSS和JavaScript的基本应用，适合前端开发者学习。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>连续向左滚动文字效果</title> <style type="text/css">  </style> </head> <body> <div id="marquees"> 赶紧干你的活去否则！嘿嘿，不给你发钱赶紧干你的活去否则！嘿嘿，不给你发钱赶紧干你的活去否则！嘿嘿，不给你发钱 </div> <div id="templayer" style="position: absolute; left: 0; top: 0; visibility: hidden"> </div> <script language="JavaScript"> marqueesWidth=500; //控制滚动宽度 with(marquees){ style.height=0; style.width=marqueesWidth; style.overflowX="hidden"; style.overflowY="visible"; noWrap=true; onmouseover=new Function("stopscroll=true"); onmouseout=new Function("stopscroll=false"); } preLeft=0; currentLeft=0; stopscroll=false; function init(){ templayer.innerHTML=""; while(templayer.offsetWidth<marqueesWidth){ templayer.innerHTML+=marquees.innerHTML; } marquees.innerHTML+=templayer.innerHTML; setInterval("scrollLeft()",20); //这里控制速度 }init(); function scrollLeft(){ if(stopscroll==true) return; preLeft=marquees.scrollLeft; marquees.scrollLeft+=1; if(preLeft==marquees.scrollLeft){ marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1; } } </script> </body> </html> </body> </html>