Фото автозаменяется с эффектом открытия шторы слева направо затем шторы с двух строн закрывают Библиотека Javascript. SE@RCHER

<!DOCTYPE html> <HTML><HEAD><TITLE>Фото автозаменяется с эффектом открытия шторы слева направо затем шторы с двух строн закрывают</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1251"> <style type="text/css"> body { font-family: verdana, arial, helvetica, sans-serif; font-size: 14px; } h1 { font-size:18px } a:link { color:#33c } a:visited { color:#339 } #content { margin-top:1px; margin-right:5% } #outerDiv { position:absolute; z-index:2; } #wipeDiv1 { position:absolute; z-index:1 } .wipe { font-family: verdana, arial, helvetica, sans-serif; font-size:14px; color:#fff; } .wipe a:link, .wipe a:visited { color:#fff } </style> <script type="text/javascript"> 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/h passed, set style width/height 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; // rounded below (this.x/y can hold decimals) 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; } // get reference to nested layer for ns4 // from dhtmllib.js by Mike Hall of www.brainjar.com 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(15,-1).split(' '); for (var i=0; i<15; 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; } // returns height of window 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; } // returns amount of vertical scroll 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; } // returns amount of horizontal scroll 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; // args: which wipe, delay, wipeTime, what next (fn) 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) { // wipe into view by expanding to the right case "in right" : this.clipTo(0,0,this.height,0); this.show(); setTimeout(this.obj+".wipe_in_rt()",this.delay); break; // wipe into view by expanding from the center out 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; // wipe into view from upper left corner to lower right case "in corner" : this.clipTo(0,0,0,0); this.show(); setTimeout(this.obj+".wipe_in_corner()",this.delay); break; // wipe into view from top to bottom case "in top" : this.clipTo(0,0,0,0); this.show(); setTimeout(this.obj+".wipe_in_top()",this.delay); break; // wipe out of view by contracting to the center 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; // wipe out of view by contracting to the left case "out left" : setTimeout(this.obj+".wipe_out_left()",this.delay); break; // wipe out of view by contracting to the right case "out right" : setTimeout(this.obj+".wipe_out_right()",this.delay); break; // wipe out of view by contracting from left and right case "out middle" : this.dest=Math.ceil(this.width/2); setTimeout(this.obj+".wipe_out_mid()",this.delay); break; // wipe out of view from the upper left to lower right case "out corner" : setTimeout(this.obj+".wipe_out_corner()",this.delay); break; // wipe out of view from bottom to top case "out top" : setTimeout(this.obj+".wipe_out_top()",this.delay); break; // wipe out of view from top to bottom case "out bottom" : setTimeout(this.obj+".wipe_out_bottom()",this.delay); break; // wipe out of view from lower right to upper left 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); } // wipe into view by expanding to the right 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); // steady this.clipTo(0,inc,this.height,0); setTimeout(this.obj+".wipe_in_rt()",15); } else { this.clipTo(0,this.width,this.height,0); this.wiping = false; if (this.fn) eval(this.fn); } } // wipe into view by expanding from the center out 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()",15); } else { this.clipTo(0,this.width,this.height,0); this.wiping = false; if (this.fn) eval(this.fn); } } // wipe into view from upper left corner to lower right 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()",15); } else { this.clipTo(0,this.width,this.height,0); this.wiping = false; if (this.fn) eval(this.fn); } } // wipe into view from top to bottom 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); } } // wipe out of view by contracting to the center 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()",15); } else { this.clipTo(this.vCenter,this.hCenter,this.vCenter,this.hCenter); this.wiping = false; if (this.fn) eval(this.fn); } } // wipe out of view by contracting to the left 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_mid()",15); } else { this.clipTo(0,0,this.height,0); this.wiping = false; if (this.fn) eval(this.fn); } } // wipe out of view by contracting to the right 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_mid()",15); } else { this.clipTo(0,this.width,this.height,this.width); this.wiping = false; if (this.fn) eval(this.fn); } } // wipe out of view by contracting from left and right 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.sin(this.per*elapsed); // this one accelerates var inc = -this.dest*Math.cos(this.per*elapsed)+this.dest; // var inc = this.dest*((1/this.wipeTime)*elapsed); this.clipTo(0,this.width-inc,this.height,inc); setTimeout(this.obj+".wipe_out_mid()",15); } else { this.clipTo(0,this.dest,this.height,this.dest); this.wiping = false; if (this.fn) eval(this.fn); } } // wipe out of view from upper left to lower right dynObj.prototype.wipe_out_corner=function () { this.wiping = true; var clipVal = this.getClipValues(); var elapsed = (new Date().getTime())-this.wipeStart; if (elapsed<this.wipeTime) { // accelerates 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()",15); } else { this.clipTo(this.height,this.width,this.height,this.width); this.wiping = false; if (this.fn) eval(this.fn); } } // wipe out of view from bottom to top 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()",15); } else { this.clipTo(0,this.width,this.height,this.width); this.wiping = false; if (this.fn) eval(this.fn); } } // wipe out of view from top to bottom 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()",15); } else { this.clipTo(0,this.width,this.height,this.width); this.wiping = false; if (this.fn) eval(this.fn); } } // wipe out of view from lower right to upper left 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()",15); } else { this.clipTo(0,0,0,0); this.wiping = false; if (this.fn) eval(this.fn); } } </script> <script type="text/javascript">  </script> </HEAD><BODY><DIV id="content"> </DIV> <DIV id="outerDiv"> <DIV id="wipeDiv1"></DIV> </DIV> </BODY></HTML>