What is the right way to do it? As always, there are several ways. Some of you may say “
use a marquee tag, and get it over with”. I am not going to do that. I will be
a good web standards designer and I will put some more effort in it.
What I am going to do is: I am going to
use two div elements, one inside the other. I will keep the markup as clean as it can be. No inline styling or inline scripting.
Outside div will act as a container. With the little help of
JavaScript,
inner (content) div will move towards the left by changing the value of its left property. Once the content goes outside the container it will be put back on the starting point and
loop forever. On
mouse over scrolling will stop. Just like old times
.
Here’s the example.
复制内容到剪贴板
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Scrolling text</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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>
<style>
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>
</head>
<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>
