轉自 : https://huhanlin-2008-163-com.iteye.com/blog/772506
- <script type="text/javascript" language="Javascript">
- var scrlSpeed=1
- // decreasing speed for mozilla
- scrlSpeed=(document.all)? scrlSpeed : Math.max(1, scrlSpeed-1)
- function initScroll(container,object){
- if (document.getElementById(container) != null){
- var contObj=document.getElementById(container);
- var obj=document.getElementById(object);
- contObj.style.visibility = "visible";
- contObj.scrlSpeed = scrlSpeed;
- widthContainer = contObj.offsetWidth;
- obj.style.left=parseInt(widthContainer)+"px";
- widthObject=obj.offsetWidth;
- interval=setInterval("objScroll('"+ container +"','"+ object +"',"+ widthContainer +")",20);
- contObj.onmouseover = function(){
- contObj.scrlSpeed=0;
- }
- contObj.onmouseout = function(){
- contObj.scrlSpeed=scrlSpeed;
- }
- }
- }
- function objScroll(container,object,widthContainer){
- var contObj=document.getElementById(container);
- var obj=document.getElementById(object);
- widthObject=obj.offsetWidth;
- if (parseInt(obj.style.left)>(widthObject*(-1))){
- obj.style.left=parseInt(obj.style.left)-contObj.scrlSpeed+"px";
- } else {
- obj.style.left=parseInt(widthContainer)+"px";
- }
- }
- // on page load we initiate scrolling
- window.onload=function(){
- initScroll("scrlContainer", "scrlContent");
- }
- </script>
2.css
Java代碼
- <style type="text/css">
- body{
- margin:0;
- padding:0;
- background:#fff;
- font: 70% Arial, Helvetica, sans-serif;
- }
- #scrlContainer{
- visibility:hidden;
- background:#f1f1f1;
- position:relative;
- overflow:hidden;
- width:250px;
- height:20px;
- line-height:20px;
- margin:1em;
- }
- #scrlContent{
- position:absolute;
- left:0;
- top:0;
- white-space:nowrap;
- }
- </style>
3.html
Java代碼
- <html>
- <body>
- <div id="scrlContainer">
- <div id="scrlContent">Some very, very useful information will
- appear here, yet it will move around your screen so it will be hard to
- read it. But the client wants it, so here it is. </div>
- </div>
- </body>
- </html>