Full version: jsB@nk » Image » Peepshow 3: flashlike image animation script
URL: https://www.javascriptbank.com/peepshow-3-flashlike-image-animation-script.html
The world's most sexy Peepshow is even more sexy now. Due to its popularity we have added several new features. Now it's cross-browser working in IE5x/6x as well as NN4x/6x. Furthermore you may insert as many pictures as you like. True cut-and-paste installation. Very easy configuration of picture URLs, position and size of peephole.
Full version: jsB@nk » Image » Peepshow 3: flashlike image animation script
URL: https://www.javascriptbank.com/peepshow-3-flashlike-image-animation-script.html
<script><!-- Beginning of JavaScript -// Peepball 3: flashlike picture animator/////////////////////////////////////////////////////////////////// CONFIGURATION STARTS HERE/////////////////////////////////////////////////////////////////// The URLs of your images. Add as many URls as you like.var picurl=new Array ("pic191.jpg", "bannerechip.gif","homer.jpg")// The horizontal position of your image (distance to the left margin of browser-window, pixels)var picposition_x=100// The vertical position of your image (distance to the top margin of browser-window, pixels)var picposition_y=100// The size of the peephole (dimension in pixels)var peepholesize=50// Standstill of your pictures. Higher means slower.var picstandstill=60/////////////////////////////////////////////////////////////////// CONFIGURATION ENDS HERE/////////////////////////////////////////////////////////////////var imgpreload=new Array()for (i=0;i<=picurl.length-1;i++) {imgpreload[i]=new Image()imgpreload[i].src=picurl[i]}var x,yvar marginbottomvar marginleftvar margintopvar marginrightvar cliptopvar clipbottomvar clipleftvar cliprightvar clippointsvar imageheight=400var imagewidth var tempo=25var i_picstandstill=0var i_pic=0var stepx=12var stepy=6var timervar ns6=document.getElementById&&!document.all?1:0function setValues() {if (document.all) {var thisspan=eval("document.all.piccontent")imagewidth=thisspan.offsetWidthimageheight=thisspan.offsetHeightmargintop=picposition_y marginleft=picposition_x marginbottom=imageheight-peepholesize+picposition_y marginright=imagewidth-peepholesize+picposition_xdocument.all.ball.style.posLeft=randommaker(imagewidth)+picposition_x document.all.ball.style.posTop=picposition_ydocument.all.piccontent.style.posLeft=picposition_x document.all.piccontent.style.posTop=picposition_y moveball()}if (ns6) {imagewidth=parseInt(document.getElementById("piccontent").offsetWidth)imageheight=parseInt(document.getElementById("piccontent").offsetHeight)margintop=picposition_y marginleft=picposition_x marginbottom=imageheight-peepholesize+picposition_y marginright=imagewidth-peepholesize+picposition_xdocument.getElementById('ball').style.left=randommaker(imagewidth)+picposition_x document.getElementById('ball').style.top=picposition_ydocument.getElementById('piccontent').style.left=picposition_x document.getElementById('piccontent').style.top=picposition_y moveball()}if (document.layers) {var thisspan=eval("document.piccontent.document")imagewidth=thisspan.widthimageheight=thisspan.heightmargintop=picposition_y marginleft=picposition_x marginbottom=imageheight-peepholesize+picposition_y marginright=imagewidth-peepholesize+picposition_xdocument.ball.left=randommaker(imagewidth)+picposition_x document.ball.top=picposition_ydocument.piccontent.left=picposition_x document.piccontent.top=picposition_y moveball()}}function randommaker(range) {rand=Math.floor(range*Math.random()) return rand}function moveball() {i_picstandstill++checkposition()if (document.all) { document.all.ball.style.posLeft+=stepx document.all.ball.style.posTop+=stepycliptop=document.all.ball.style.posTop-picposition_yclipbottom=cliptop+peepholesizeclipleft=document.all.ball.style.posLeft-picposition_xclipright=clipleft+peepholesizeclippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.all.piccontent.style.clip=clippointsif (i_picstandstill>picstandstill) {i_pic++if (i_pic>picurl.length-1){i_pic=0}piccontent.innerHTML="<img src='"+picurl[i_pic]+"'>"i_picstandstill=0} timer=setTimeout("moveball()",tempo)}if (ns6) { document.getElementById('ball').style.left=parseInt(document.getElementById('ball').style.left)+stepx document.getElementById('ball').style.top=parseInt(document.getElementById('ball').style.top)+stepycliptop=parseInt(document.getElementById('ball').style.top)-picposition_yclipbottom=cliptop+peepholesizeclipleft=parseInt(document.getElementById('ball').style.left)-picposition_xclipright=clipleft+peepholesizeclippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.getElementById('piccontent').style.clip=clippointsif (i_picstandstill>picstandstill) {i_pic++if (i_pic>picurl.length-1){i_pic=0}document.getElementById('piccontent').innerHTML="<img src='"+picurl[i_pic]+"'>"i_picstandstill=0} timer=setTimeout("moveball()",tempo)}if (document.layers) { document.ball.left+=stepx document.ball.top+=stepycliptop=document.ball.top-picposition_yclipbottom=cliptop+peepholesizeclipleft=document.ball.left-picposition_xclipright=clipleft+peepholesizedocument.piccontent.clip.left=clipleft document.piccontent.clip.right=clipright document.piccontent.clip.top=cliptop document.piccontent.clip.bottom=clipbottomif (i_picstandstill>picstandstill) {i_pic++if (i_pic>picurl.length-1){i_pic=0}document.piccontent.document.write("<img src='"+picurl[i_pic]+"'>")document.piccontent.document.close()i_picstandstill=0} timer=setTimeout("moveball()",tempo)}}function checkposition() {if (document.all) {if (document.all.ball.style.posLeft>=marginright) {stepx=stepx*-1document.all.ball.style.posLeft-=10}if (document.all.ball.style.posLeft<=marginleft) {stepx=stepx*-1document.all.ball.style.posLeft+=10}if (document.all.ball.style.posTop>=marginbottom) {stepy=stepy*-1document.all.ball.style.posTop-=10}if (document.all.ball.style.posTop<=margintop) {stepy=stepy*-1document.all.ball.style.posTop+=10}}if (ns6) {if (parseInt(document.getElementById('ball').style.left)>=marginright) {stepx=stepx*-1document.getElementById('ball').style.left=parseInt(document.getElementById('ball').style.left)-10}if (parseInt(document.getElementById('ball').style.left)<=marginleft) {stepx=stepx*-1document.getElementById('ball').style.left=parseInt(document.getElementById('ball').style.left)+10}if (parseInt(document.getElementById('ball').style.top)>=marginbottom) {stepy=stepy*-1document.getElementById('ball').style.top=parseInt(document.getElementById('ball').style.top)-10}if (parseInt(document.getElementById('ball').style.top)<=margintop) {stepy=stepy*-1document.getElementById('ball').style.top=parseInt(document.getElementById('ball').style.top)+10}}if (document.layers) {if (document.ball.left>=marginright) {stepx=stepx*-1document.ball.left-=10}if (document.ball.left<=marginleft) {stepx=stepx*-1document.ball.left+=10}if (document.ball.top>=marginbottom) {stepy=stepy*-1document.ball.top-=10}if (document.ball.top<=margintop) {stepy=stepy*-1document.ball.top+=10}}}if (document.all) {document.write("<DIV id='piccontent' style='position: absolute; top:-5000px; left:-5000px'><img src='"+picurl[0]+"' border=0></DIV>")if (navigator.appVersion.indexOf("Mac") > 0) {document.write("<DIV id='ball' style='position:absolute; top:-50px; width:"+peepholesize+"px;height:"+peepholesize+"px'></DIV>")}else {document.write("<DIV id='ball' style='position:absolute; top:-50px; width:"+peepholesize+"px;height:"+peepholesize+"px;background-color:white;filter:alpha(opacity=0,finishopacity=100,style=2,startX=0px,startY=0px,finishX="+peepholesize+"px,finishY="+peepholesize+"px)'></DIV>")}}else if (ns6) {document.write("<DIV id='piccontent' style='position: absolute; top:-5000px; left:-5000px'><img src='"+picurl[0]+"' border=0></DIV>")document.write("<DIV id='ball' style='position:absolute; top:-50px; width:"+peepholesize+"px;height:"+peepholesize+"px;'></DIV>")}else if (document.layers) {document.write("<layer name='piccontent' top=-5000 left=-5000><img src='"+picurl[0]+"' border=0></layer>")document.write("<layer name='ball' top=-500 width="+peepholesize+" height="+peepholesize+"></layer>")document.close()}else {document.write("<DIV id='piccontent' style='position:absolute; top:"+picposition_y+"px;left:"+picposition_x+"px'><img src='"+picurl[0]+"' border=0></DIV>")document.close()}if (document.all || document.layers || ns6) {window.onload=setValues}// - End of JavaScript - --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->