Фото авто заменяется. - Фото эффекты - Каталог javascript

<HTML><HEAD>
<TITLE>Фото автозаменяется с анимационным эффектом</TITLE>
<STYLE type=text/css>
BODY { FONT-SIZE: 14px; FONT-FAMILY: verdana, arial, helvetica, sans-serif}
H1 { FONT-SIZE: 18px}
A:link { COLOR: #33c}
A:visited { COLOR: #339}
#outerDiv { Z-INDEX: 100; POSITION: absolute}
#wipeDiv1 { Z-INDEX: 1; POSITION: absolute}
</STYLE>
<SCRIPT >
function dynObj(id,x,y,w,h) {
this.el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? getLyrRef(id,document): null;
if (!this.el) return null;
this.doc = (document.layers)? this.el.document: this.el;
this.css = (this.el.style)? this.el.style: this.el;
var px = (document.layers||window.opera)? "": "px";
this.x = x || 0; if (x) this.css.left = this.x+px;
this.y = y || 0; if (y) this.css.top = this.y+px;
this.width = w? w: (this.el.offsetWidth)? this.el.offsetWidth: (this.css.clip.width)? this.css.clip.width: 0;
this.height = h? h: (this.el.offsetHeight)? this.el.offsetHeight: (this.css.clip.height)? this.css.clip.height: 0;
if (w){ (document.layers)? this.css.clip.width=w+px: this.css.width=w+px;}
if (h){ (document.layers)? this.css.clip.height=h+px: this.css.height=h+px;}
this.obj = id + "_dynObj"; eval(this.obj + "=this");
}

dynObj.prototype.show = function () { this.css.visibility = "visible"; }
dynObj.prototype.hide = function () { this.css.visibility = "hidden"; }

dynObj.prototype.shiftTo = function (x,y) {
if (x!=null) this.x=x; if (y!=null) this.y=y;
if (this.css.moveTo) {
this.css.moveTo(Math.round(this.x),Math.round(this.y));
} else {
this.css.left=Math.round(this.x)+"px";
this.css.top=Math.round(this.y)+"px";
}}
dynObj.prototype.shiftBy = function (x,y) {
this.shiftTo(this.x+x,this.y+y);
}
dynObj.prototype.writeLyr = function (cntnt) {
if (typeof this.doc.innerHTML!="undefined") {
this.doc.innerHTML = cntnt;
} else if (document.layers) {
this.doc.write(cntnt);
this.doc.close();
}}
dynObj.prototype.setBgClr = function (bg) {
if (document.layers) this.doc.bgColor=bg;
else this.css.backgroundColor=bg;
}
function getLyrRef(lyr,doc) {
if (document.layers) {
var theLyr;
for (var i=0; i<doc.layers.length; i++) {
theLyr = doc.layers[i];
if (theLyr.name == lyr) return theLyr;
else if (theLyr.document.layers.length > 0)
if ((theLyr = getLyrRef(lyr,theLyr.document)) != null)
return theLyr;
}
return null;
}}
</SCRIPT>

<SCRIPT >
dynObj.prototype.getClipValues = function() {
if (typeof this.css.clip != "undefined") {
var clipVal = new Array();
if (typeof this.css.clip.top != "undefined") {
clipVal[0] = this.css.clip.top;
clipVal[1] = this.css.clip.right;
clipVal[2] = this.css.clip.bottom;
clipVal[3] = this.css.clip.left;
} else {
clipVal = this.css.clip.slice(5,-1).split(' ');
for (var i=0; i<4; i++) {
clipVal[i] = parseInt(clipVal[i]);
} }
return clipVal;
}
else return false;
}

dynObj.prototype.clipBy = function(top,rt,btm,lft) {
if (typeof this.css.clip != "undefined") {
if (typeof this.css.clip.top != "undefined") {
this.css.clip.top += top;
this.css.clip.right += rt;
this.css.clip.bottom += btm;
this.css.clip.left += lft;
} else {
var clipVal = this.getClipValues();
this.css.clip = "rect(" + Number(clipVal[0]+top) + "px, " + Number(clipVal[1]+rt) + "px, " + Number(clipVal[2]+btm) + "px, " + Number(clipVal[3]+lft) + "px)";
} }}
dynObj.prototype.clipTo = function(top,rt,btm,lft) {
if (typeof this.css.clip != "undefined") {
if (typeof this.css.clip.top != "undefined") {
this.css.clip.top = top;
this.css.clip.right = rt;
this.css.clip.bottom = btm;
this.css.clip.left = lft;
} else {
this.css.clip = "rect("+top+"px, "+rt+"px, "+btm+"px, "+lft+"px)";
} }}
</SCRIPT>

<SCRIPT >
dynObj.prototype.centerIn = function(outer) {
var outWd, outHt, inWd, inHt, x, y;
if (eval(outer)==window) {
outWd=getWinWidth();
outHt=getWinHeight();
} else {
outWd=outer.width;
outHt=outer.height;
}
inWd=this.width;
inHt=this.height;
x=Math.round((outWd-inWd)/2);
y=Math.round((outHt-inHt)/2);
this.shiftTo(x,y);
}
function getWidth(obj,id) {
var wd=0;
if (document.getElementById||document.all) {
var elem;
if (id) elem = (document.getElementById)? document.getElementById(id): document.all[id];
else elem = obj;
if (elem.offsetWidth) wd = elem.offsetWidth;
} else if (obj.document) wd = obj.document.width; // ns4
return wd;
}

function getHeight(obj,id) {
var ht=0;
if (document.getElementById||document.all) {
var elem;
if (id) elem = (document.getElementById)? document.getElementById(id): document.all[id];
else elem = obj;
if (elem.offsetHeight) ht = elem.offsetHeight;
} else if (obj.document) ht = obj.document.height; // ns4
return ht;
}
function getWinWidth() {
var winWd = 0;
if (document.documentElement && document.documentElement.clientWidth)
winWd = document.documentElement.clientWidth;
else if (document.body && document.body.clientWidth)
winWd = document.body.clientWidth;
else if (document.body && document.body.offsetWidth)
winWd = document.body.offsetWidth; // ns6
else if (window.innerWidth) winWd = window.innerWidth-18;
return winWd;
}
function getWinHeight() {
var winHt = 0;
if (window.innerHeight) winHt = window.innerHeight-18;
else if (document.documentElement && document.documentElement.clientHeight)
winHt = document.documentElement.clientHeight;
else if (document.body && document.body.clientHeight)
winHt = document.body.clientHeight;
return winHt;
}
function getScrollY() {
var sy = 0;
if (document.documentElement && document.documentElement.scrollTop)
sy = document.documentElement.scrollTop;
else if (document.body && document.body.scrollTop)
sy = document.body.scrollTop;
else if (window.pageYOffset)
sy = window.pageYOffset;
else if (window.scrollY)
sy = window.scrollY;
return sy;
}
function getScrollX() {
var sx = 0;
if (document.documentElement && document.documentElement.scrollLeft)
sx = document.documentElement.scrollLeft;
else if (document.body && document.body.scrollLeft)
sx = document.body.scrollLeft;
else if (window.pageXOffset)
sx = window.pageXOffset;
else if (window.scrollX)
sx = window.scrollX;
return sx;
}
</SCRIPT>

<SCRIPT >
var wipe_halt = false;
dynObj.prototype.wipe=function(which,delay,wipeTime,fn) {
if (wipe_halt||this.wiping) return;
this.wipeTime=wipeTime||1000; this.delay=delay||100; this.fn=fn;
switch (which) {
case "in right" :
this.clipTo(0,0,this.height,0);
this.show();
setTimeout(this.obj+".wipe_in_rt()",this.delay);
break;
case "in center" :
this.vCenter = Math.ceil(this.height/2);
this.hCenter = Math.ceil(this.width/2);
this.clipTo(this.vCenter,this.hCenter,this.vCenter,this.hCenter);
this.show();
setTimeout(this.obj+".wipe_in_center()",this.delay);
break;
case "in corner" :
this.clipTo(0,0,0,0);
this.show();
setTimeout(this.obj+".wipe_in_corner()",this.delay);
break;
case "in top" :
this.clipTo(0,0,0,0);
this.show();
setTimeout(this.obj+".wipe_in_top()",this.delay);
break;
case "out center" :
this.vCenter = Math.ceil(this.height/2);
this.hCenter = Math.ceil(this.width/2);
setTimeout(this.obj+".wipe_out_center()",this.delay);
break;
case "out left" :
setTimeout(this.obj+".wipe_out_left()",this.delay);
break;
case "out right" :
setTimeout(this.obj+".wipe_out_right()",this.delay);
break;
case "out middle" :
this.dest=Math.ceil(this.width/2);
setTimeout(this.obj+".wipe_out_mid()",this.delay);
break;
case "out corner" :
setTimeout(this.obj+".wipe_out_corner()",this.delay);
break;
case "out top" :
setTimeout(this.obj+".wipe_out_top()",this.delay);
break;
case "out bottom" :
setTimeout(this.obj+".wipe_out_bottom()",this.delay);
break;
case "out top left" :
setTimeout(this.obj+".wipe_out_top_left()",this.delay);
break;

default:
alert("Oops! Check choices again.");
}
this.wipeStart = new Date().getTime()+this.delay;
this.per = Math.PI/(2*this.wipeTime);
}
dynObj.prototype.wipe_in_rt=function() {
this.wiping = true;
var clipVal = this.getClipValues();
var elapsed = (new Date().getTime())-this.wipeStart;
if (elapsed<this.wipeTime) {
var inc = this.width*((1/this.wipeTime)*elapsed);
this.clipTo(0,inc,this.height,0);
setTimeout(this.obj+".wipe_in_rt()",35);
} else {
this.clipTo(0,this.width,this.height,0);
this.wiping = false;
if (this.fn) eval(this.fn);
}}
dynObj.prototype.wipe_in_center=function() {
this.wiping = true;
var clipVal = this.getClipValues();
var elapsed = (new Date().getTime())-this.wipeStart;
if (elapsed<this.wipeTime) {
var vinc = this.vCenter*((1/this.wipeTime)*elapsed);
var hinc = this.hCenter*((1/this.wipeTime)*elapsed);
this.clipTo(this.vCenter-vinc,this.hCenter+hinc,this.vCenter+vinc,this.hCenter-hinc);
setTimeout(this.obj+".wipe_in_center()",35);
} else {
this.clipTo(0,this.width,this.height,0);
this.wiping = false;
if (this.fn) eval(this.fn);
}}
dynObj.prototype.wipe_in_corner=function() {
this.wiping = true;
var clipVal = this.getClipValues();
var elapsed = (new Date().getTime())-this.wipeStart;
if (elapsed<this.wipeTime) {
var vinc = this.height*((1/this.wipeTime)*elapsed);
var hinc = this.width*((1/this.wipeTime)*elapsed);
this.clipTo(0,hinc,vinc,0);
setTimeout(this.obj+".wipe_in_corner()",35);
} else {
this.clipTo(0,this.width,this.height,0);
this.wiping = false;
if (this.fn) eval(this.fn);
}}
dynObj.prototype.wipe_in_top=function() {
this.wiping = true;
var clipVal = this.getClipValues();
var elapsed = (new Date().getTime())-this.wipeStart;
if (elapsed<this.wipeTime) {
var inc = this.height*((1/this.wipeTime)*elapsed);
this.clipTo(0,this.width,inc,0);
setTimeout(this.obj+".wipe_in_top()",35);
} else {
this.clipTo(0,this.width,this.height,0);
this.wiping = false;
if (this.fn) eval(this.fn);
}}
dynObj.prototype.wipe_out_center=function() {
this.wiping = true;
var clipVal = this.getClipValues();
var elapsed = (new Date().getTime())-this.wipeStart;
if (elapsed<this.wipeTime) {
var vinc = this.vCenter*((1/this.wipeTime)*elapsed);
var hinc = this.hCenter*((1/this.wipeTime)*elapsed);
this.clipTo(vinc,this.width-hinc,this.height-vinc,hinc);
setTimeout(this.obj+".wipe_out_center()",35);
} else {
this.clipTo(this.vCenter,this.hCenter,this.vCenter,this.hCenter);
this.wiping = false;
if (this.fn) eval(this.fn);
}}
dynObj.prototype.wipe_out_left=function() {
this.wiping = true;
var clipVal = this.getClipValues();
var elapsed = (new Date().getTime())-this.wipeStart;
if (elapsed<this.wipeTime) {
var inc = this.width*((1/this.wipeTime)*elapsed);
this.clipTo(0,this.width-inc,this.height,0);
setTimeout(this.obj+".wipe_out_left()",35);
} else {
this.clipTo(0,0,this.height,0);
this.wiping = false;
if (this.fn) eval(this.fn);
}}
dynObj.prototype.wipe_out_right=function() {
this.wiping = true;
var clipVal = this.getClipValues();
var elapsed = (new Date().getTime())-this.wipeStart;
if (elapsed<this.wipeTime) {
var inc = this.width*((1/this.wipeTime)*elapsed);
this.clipTo(0,this.width,this.height,inc);
setTimeout(this.obj+".wipe_out_right()",35);
} else {
this.clipTo(0,this.width,this.height,this.width);
this.wiping = false;
if (this.fn) eval(this.fn);
}}
dynObj.prototype.wipe_out_mid=function() {
this.wiping = true;
var clipVal = this.getClipValues();
var elapsed = (new Date().getTime())-this.wipeStart;
if (elapsed<this.wipeTime) {
var inc = -this.dest*Math.cos(this.per*elapsed)+this.dest;
this.clipTo(0,this.width-inc,this.height,inc);
setTimeout(this.obj+".wipe_out_mid()",35);
} else {
this.clipTo(0,this.dest,this.height,this.dest);
this.wiping = false;
if (this.fn) eval(this.fn);
}}
dynObj.prototype.wipe_out_corner=function () {
this.wiping = true;
var clipVal = this.getClipValues();
var elapsed = (new Date().getTime())-this.wipeStart;
if (elapsed<this.wipeTime) {
var vinc = -this.height*Math.cos(this.per*elapsed)+this.height;
var hinc = -this.width*Math.cos(this.per*elapsed)+this.width;
this.clipTo(vinc,this.width,this.height,hinc);
setTimeout(this.obj+".wipe_out_corner()",35);
} else {
this.clipTo(this.height,this.width,this.height,this.width);
this.wiping = false;
if (this.fn) eval(this.fn);
}}
dynObj.prototype.wipe_out_top=function() {
this.wiping = true;
var clipVal = this.getClipValues();
var elapsed = (new Date().getTime())-this.wipeStart;
if (elapsed<this.wipeTime) {
var inc = this.height*((1/this.wipeTime)*elapsed);
this.clipTo(0,this.width,this.height-inc,0);
setTimeout(this.obj+".wipe_out_top()",35);
} else {
this.clipTo(0,this.width,this.height,this.width);
this.wiping = false;
if (this.fn) eval(this.fn);
}}
dynObj.prototype.wipe_out_bottom=function() {
this.wiping = true;
var clipVal = this.getClipValues();
var elapsed = (new Date().getTime())-this.wipeStart;
if (elapsed<this.wipeTime) {
var inc = this.height*((1/this.wipeTime)*elapsed);
this.clipTo(inc,this.width,this.height,0);
setTimeout(this.obj+".wipe_out_bottom()",35);
} else {
this.clipTo(0,this.width,this.height,this.width);
this.wiping = false;
if (this.fn) eval(this.fn);
}}
dynObj.prototype.wipe_out_top_left=function () {
this.wiping = true;
var clipVal = this.getClipValues();
var elapsed = (new Date().getTime())-this.wipeStart;
if (elapsed<this.wipeTime) {
var vinc = -this.height*Math.cos(this.per*elapsed)+this.height;
var hinc = -this.width*Math.cos(this.per*elapsed)+this.width;
this.clipTo(0,this.width-hinc,this.height-vinc,0);
setTimeout(this.obj+".wipe_out_top_left()",35);
} else {
this.clipTo(0,0,0,0);
this.wiping = false;
if (this.fn) eval(this.fn);
}}
</SCRIPT>
<SCRIPT type=text/javascript>
var origWidth, origHeight;
if (document.layers) {
origWidth = window.innerWidth; origHeight = window.innerHeight;
window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

var outerLyr, wipeLyr1;
function initDynLyrs() {
outerLyr = new dynObj('outerDiv',320,120,350,450);
if (!outerLyr || !document.layers && typeof outerLyr.el.innerHTML == "undefined") return;
outerLyr.setBgClr("#FFF");
if (outerLyr.el.style) {
outerLyr.css.border = "2px outset #FF0000"
}
wipeLyr1 = new dynObj('wipeDiv1');
doWipes();
}
window.onload=initDynLyrs;
var imgAr = new Array("http://javascript.clan.su/ime/001.jpg","http://javascript.clan.su/ime/003.jpg","http://javascript.clan.su/ime/005.jpg");
if (document.images) {
var imgList = new Array();
for (var i=0; i<imgAr.length; i++) {
imgList[i] = new Image();
imgList[i].src = " " / + imgAr[i]; //////////////////////////////////
}}
var wipe_array=new Array(
'<a href=""><img src="http://javascript.clan.su/ime/001.jpg" width="350" height="450" alt="" border="0"></a>',1500,
'<a href=""><img src="http://javascript.clan.su/ime/002.jpg" width="350" height="450" alt="" border="0"></a>',1500,
'<a href=""><img src="http://javascript.clan.su/ime/003.jpg" width="350" height="450" alt="" border="0"></a>',1500,
'<a href=""><img src="http://javascript.clan.su/ime/004.jpg" width="450" height="350" alt="" border="0"></a>',1500,
'<a href=""><img src="http://javascript.clan.su/ime/005.jpg" width="450" height="350" alt="" border="0"></a>',1500,
'<a href=""><img src="http://javascript.clan.su/ime/006.jpg" width="450" height="350" alt="" border="0"></a>',1500
);
var wipe_count=0;
function doWipes() {
if (wipe_count<wipe_array.length) {
var cntnt = '<table id="w1" border="0" cellpadding="0" cellspacing="0"><tr><td class="wipe">'+ wipe_array[wipe_count] +'</td></tr></table>';
wipePrep(wipeLyr1,cntnt,'w1');
wipeLyr1.centerIn(outerLyr);
wipeLyr1.wipe("in corner",1200,wipe_array[wipe_count+1],"wipeOuts()");
} else {
wipe_count=0;
doWipes();
}}
function wipePrep(obj,cntnt,id) {
obj.hide();
obj.clipTo(0,obj.width,obj.height,0);
obj.writeLyr(cntnt);
obj.width=getWidth(obj.el,id);
obj.height=getHeight(obj.el,id);
}
function wipeOuts() {
var dv = 3;
wipeLyr1.wipe("out middle", 2000, wipe_array[wipe_count+1]/dv,"doWipes()");
wipe_count+=2;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id=outerDiv>
<DIV id=wipeDiv1></DIV></DIV>
</BODY></HTML>