How would I do this animation?

@vwphillipsAug 22.2011 — #

[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[*/
 
 #tst {
 position:relative;left:50px;top:50px;width:400px;height:150px;
 }
 
 #tst IMG{
 position:relative;float:left;
 }
 
 /*]]>*/
 </style>
 
 </head>
 
 <body>
 
 <div id="tst" >
 <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
 <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
 </div>
 
 <script type="text/javascript">
 /*<![CDATA[*/
 
 function zxcSlide(o){
 var oop=this,obj=document.getElementById(o.ID),ms=o.Duration,imgs=obj.getElementsByTagName('IMG');
 this.obj=obj;
 this.ms=typeof(ms)=='number'?ms:1000;
 this.dyl=null;
 imgs[0].onmouseup=function(){ oop.slide(this,imgs[0].width); }
 imgs[1].onmouseup=function(){ oop.slide(this,-imgs[1].width); }
 }
 
 zxcSlide.prototype={
 
 visibility:function(){
 this.obj.style.visibility=this.top()>=this.view?'visible':'hidden';
 },
 
 slide:function(img,to){
 clearTimeout(this.dly);
 img.style.zIndex='2';
 img.onmouseup=null;
 this.img=img;
 this.animate(0,to,new Date().getTime(),this.ms);
 },
 
 animate:function(s,f,srt,mS){
 var oop=this,op=oop.oop,ms=new Date().getTime()-srt,d=(f-s)/mS*ms+s;
 if (isFinite(d)){
 oop.now=d;
 }
 this.img.style.left=oop.now+'px';
 if (ms<mS){
 oop.dly=setTimeout(function(){oop.animate(s,f,srt,mS); },10);
 }
 else {
 this.img.style.left=f+'px';
 }
 }
 
 }
 
 
 new zxcSlide({
 ID:'tst',     // the unique ID name of the 'float' element.             (string)
 Duration:1000 //(optional) the scroll duration in milli seconds.        (number, default = 1000)
 });
 
 
 
 
 
 /*]]>*/
 </script>
 
 </body>
 
 </html>[/CODE]

How would I do this animation?

1 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How would I do this animation?

1 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

1 Comments(s) _↴

Also in #JavaScript _↴