Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.parent {
position:absolute;overflow:hidden;visibility:hidden;left:0px;top:100px;width:100%;height:100px;
}
.message {
position:absolute;left:0px;top:0px;width:100px;height:100px;background-Color:#FFCC66;
}
/*]]>*/
</style>
</head>
<body>
<div class="parent" >
<div class="message" id="tst1" onmouseover="M1.Pause();" onmouseout="M1.Fly();" >Message 1</div>
</div>
<div class="parent" style="top:300px;" >
<div class="message" id="tst2" onmouseover="M2.Pause();" onmouseout="M2.Fly();" >Message 2</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcFlyingMessage(o){
this.obj=document.getElementById(o.ID);
this.p=this.obj.parentNode;
this.lft=-this.obj.offsetWidth;
this.obj.style.left=this.lft+'px';
this.speed=o.Speed||5;
var oop=this;
this.to=setTimeout(function(){ oop.Fly(); },o.StartDelay||50);
}
zxcFlyingMessage.prototype={
Fly:function(){
if (this.lft<this.p.offsetWidth){
this.lft+=this.speed;
this.obj.style.visibility='visible';
this.obj.style.left=this.lft+'px';
var oop=this;
this.to=setTimeout(function(){ oop.Fly(); },50);
}
else {
this.obj.style.visibility='hidden';
}
},
Pause:function(){
clearTimeout(this.to);
}
}
M1=new zxcFlyingMessage({
ID:'tst1',
Speed:4,
StartDelay:2000
});
M2=new zxcFlyingMessage({
ID:'tst2'
});
/*]]>*/
</script>
</body>
</html>
New Comer (less than 5 posts)
Flying Message script II to work on Chrome
Posting Permissions
Reply With Quote
Bookmarks