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[*/
#tst1 {
position:absolute;z-Index:2;left:0px;top:0px;width:100px;height:20px;background-Color:#FFCC66;
}
.parent {
position:relative;width:200px;height:150px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg);
}
/*]]>*/
</style>
<script type="text/javascript">
// AnimateII (08-October-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the
// left, top, width, height, color, background-Color, Opacity, border-Width, border-Color, clip
// style of an element over a specified period of time.
// **** Application Notes
// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
// If not assigned the style position of the element will be assigned as 'position:relative;' by the script.
//
// The element would normally be assigned a unique ID name.
//
// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimateII('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the initial value. (digits, default = 0)
//
// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
// **** Notes
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity', clip, 'color', 'background-Color'.
//
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//
// Note 3: To animate colors('color' or 'background-Color') the start and finish values may be.
// HEX('#FF0000') or RGB('rgb(255,0,0)'), abbreviated HEX or named colors are not allowed.
//
// Note 4: To animate 'clip' the start and finish values may be
// arrays of the top, right, bottom and left values([0,100,20,0])
// or the standard clip format 'rect(0px,100px,20px,0px)'.
//
// Note 5: It may be required to access the current value of the effect.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2 respectively && each field is an array.
// For color each field is an array storing the R, G, B values.
// The current effect value is recorded in A.data[0].
//
// Note 6: A function may be called on completion of the effect by assigning the function
// to the animator instance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//
// **** Functional Code(2.61K) - NO NEED to Change
function zxcAnimateII(mde,obj,srt){
this.obj=(typeof(obj)=='string')?document.getElementById(obj):obj;
this.mde=mde.replace(/[-#]/g,'');
this.data=[srt?this.convert(srt,this.mde):0];
this.to=null;
}
zxcAnimateII.prototype={
animate:function(srt,fin,ms,c){
this.std=!(this.mde.indexOf('olor')>0||this.mde=='clip'||this.mde=='opacity');
srt=this.convert(srt,this.mde);
fin=this.convert(fin,this.mde);
this.pos=true;
for (var z0=0;z0<srt.length;z0++){
if (srt[z0]<0||fin[z0]<0){
this.pos=false;
}
}
c=c||'';
this.c=c.charAt(0).toLowerCase();
this.mS=ms||2000;
clearTimeout(this.to);
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.mS);
this.data=[[],srt,fin];
this.cng();
},
cng:function(){
var ms=new Date().getTime()-this.srttime;
for (var z0=0;z0<this.data[2].length;z0++){
this.data[0][z0]=Math.floor(this.c=='s'?(this.data[2][z0]-this.data[1][z0])*Math.sin(this.inc*ms)+this.data[1][z0]:this.c=='c'?(this.data[2][0])-(this.data[2][z0]-this.data[1][z0])*Math.cos(this.inc*ms):(this.data[2][z0]-this.data[1][z0])/this.mS*ms+this.data[1][z0]);
if (this.pos&&this.data[0][z0]<0){
this.data[0][z0]=0;
}
}
this.cngstyle();
if (ms<this.mS){
this.to=setTimeout(function(oop){ return function(){oop.cng(); } }(this), 10);
}
else {
this.data[0]=this.data[2];
this.cngstyle(this.data[0]);
if (this.Complete){
this.Complete(this);
}
}
},
cngstyle:function(){
var v=this.data[0];
if (this.std){
this.obj.style[this.mde]=v[0]+'px';
}
else if (this.mde.indexOf('olor')>0){
this.obj.style[this.mde]='rgb('+v[0]+','+v[1]+','+v[2]+')';
}
else if (this.mde=='clip'){
this.obj.style[this.mde]='rect('+v[0]+'px,'+v[1]+'px,'+v[2]+'px,'+v[3]+'px)';
}
else if (this.mde=='opacity'){
zxcOpacity(this.obj,v[0]);
}
},
convert:function(col,mde){
if (typeof(col)=='object'){
return col;
}
else if (mde=='clip'){
col=col.replace(/[rect()px]/g,'').split(',');
return [col[0]*1,col[1]*1,col[2]*1,col[3]*1];
}
else if (!col.toString().match('#')){
return [parseInt(col)];
}
else {
col=parseInt(col.substring(1,3),16)+','+parseInt(col.substring(3,5),16)+','+parseInt(col.substring(5,7),16);
col=col.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(col[0]),parseInt(col[1]),parseInt(col[2])];
}
}
}
function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
</head>
<body>
<input type="button" name="" value="Toggle tst1" onmouseup="R1.Animate();" />
<input type="button" name="" value="Open tst1" onmouseup="R1.Animate(true);" />
<input type="button" name="" value="Close tst1" onmouseup="R1.Animate(false);" />
<div class="parent" >
<div id="tst1" >test</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcReveal(o){
var obj=document.getElementById(o.ID),w=obj.offsetWidth+5,h=obj.offsetHeight+5,p=obj.parentNode;
var min=[0,w,0,0];
var max=[0,w,h,0];
this.clip=new zxcAnimateII('clip',obj,min);
this.ms=o.AnimationSpeed||1000;
this.mm=[min,max];
this.toggle=false;
this.Animate();
this.addevt(p,'mouseover','Animate',true);
this.addevt(p,'mouseout','hide');
this.to=null;
}
zxcReveal.prototype={
Animate:function(ud){
clearTimeout(this.to);
if (typeof(ud)=='boolean'){
this.toggle=ud;
}
this.clip.animate(this.clip.data[0],this.mm[this.toggle?1:0],this.ms);
this.toggle=!this.toggle;
},
hide:function(){
var oop=this;
this.to=setTimeout(function(){ oop.Animate(false); },100);
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}
}
R1=new zxcReveal({
ID:'tst1',
AnimationSpeed:500
});
/*]]>*/
</script>
</body>
</html>
Problems with mouseOver on fold out menu
Reply With Quote
Bookmarks