Библиотека Javascript. SE@RCHER

<html> <head> <TITLE>Курсор в виде автозаменяющихся фото</TITLE> <meta NAME="keywords" CONTENT="DHTML, slideshow, pictures, images, JavaScript, Dynamic HTML, download, free, samples, animation"> <meta NAME="description" CONTENT="This slideshow with unique lamellar transition effect follows your cursor for ever and ever. Add as many images as you like. True copy-and-paste installation. Easy configuration. CROSSBROWSER, does not work with NN6."> </head> <body bgcolor="#FFFFFF" text="000000"> <style> .s { position:absolute; left:-5000px; topt:-5000px; } </style> <script>  </script> <script > // with step-by-step instructions and copy-and-paste installation.var imgpreload=new Array() var imgpreload=new Array for (i=0;i<=picture.length;i++) { imgpreload[i]=new Image() imgpreload[i].src=picture[i] } var x,y var horizontal_pos=0 var vertical_pos=0 var x_slices=6 var startpausetime var nowpausetime var starttime var nowtime var stoptime var timetohidescroller=false var textmovedtoleft=0 var picturewidth var pictureheight var i_loop=0 var i_picture=0 var width_slice var cliptop=0 var clipbottom var i_clipright=1 var content="" pause=pause*1000 function initiate() { getcontent() if (document.all) { for (i=0;i<=x_slices;i++) { var thisinners=eval("s"+i) thisinners.innerHTML=content var thiss=eval("document.all.s"+i+".style") thiss.posLeft=horizontal_pos thiss.posTop=vertical_pos } var thisspan = eval("document.all.s"+0) picturewidth=thisspan.offsetWidth pictureheight=thisspan.offsetHeight width_slice=Math.ceil(picturewidth/x_slices) clipbottom=pictureheight document.all.whole.style.posLeft=horizontal_pos document.all.whole.style.posTop=vertical_pos i_picture++ openlamellar() } if (document.layers) { for (i=0;i<=x_slices;i++) { var thisinners=eval("document.s"+i+".document") thisinners.write(content) thisinners.close() var thiss=eval("document.s"+i) thiss.left=horizontal_pos thiss.top=vertical_pos } var thisspan=eval("document.s"+0+".document") picturewidth=thisspan.width pictureheight=thisspan.height width_slice=Math.ceil(picturewidth/x_slices) clipbottom=pictureheight document.whole.document.write(" ") document.whole.document.close() document.whole.left=horizontal_pos document.whole.top=vertical_pos i_picture++ openlamellarNN() } } function openlamellar() { clipleft=-width_slice clipright=0 if (i_clipright<=width_slice) { for (i=0;i<=x_slices;i++) { var thiss=eval("document.all.s"+i+".style") thiss.posLeft=x thiss.posTop=y document.all.whole.style.posLeft=x document.all.whole.style.posTop=y thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" clipleft+=width_slice clipright=clipleft+i_clipright } i_clipright++ var timer=setTimeout("openlamellar()",20) } else { clearTimeout(timer) whole.innerHTML=content startpause() makepause() } } function makepause() { checkpausetime() if (nowpausetime<pause) { for (i=0;i<=x_slices;i++) { var thiss=eval("document.all.s"+i+".style") thiss.posLeft=x thiss.posTop=y document.all.whole.style.posLeft=x document.all.whole.style.posTop=y } var timer=setTimeout("makepause()",20) } else { clearTimeout(timer) changepicture() } } function makepauseNN() { checkpausetime() if (nowpausetime<pause) { for (i=0;i<=x_slices;i++) { var thiss=eval("document.s"+i) thiss.left=x thiss.top=y document.whole.left=x document.whole.top=y } var timer=setTimeout("makepauseNN()",20) } else { clearTimeout(timer) changepictureNN() } } function openlamellarNN() { clipleft=-width_slice clipright=0 if (i_clipright<=width_slice) { for (i=0;i<=x_slices;i++) { var thiss=eval("document.s"+i) thiss.left=x thiss.top=y document.whole.left=x document.whole.top=y thiss.clip.left=clipleft thiss.clip.right=clipright thiss.clip.top=cliptop thiss.clip.bottom=clipbottom clipleft+=width_slice clipright=clipleft+i_clipright } i_clipright++ var timer=setTimeout("openlamellarNN()",20) } else { clearTimeout(timer) document.whole.document.write(content) document.whole.document.close() startpause() makepauseNN() } } function getcontent() { content="<img src="+picture[i_picture]+" border=0 width=200>" } function changepicture() { i_clipright=0 clipleft=0 clipright=0 for (i=0;i<=x_slices;i++) { var thiss=eval("document.all.s"+i+".style") thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" } if (i_picture>picture.length-1) {i_picture=0} getcontent() for (i=0;i<=x_slices;i++) { var thisinners=eval("s"+i) thisinners.innerHTML=content } i_picture++ openlamellar() } function changepictureNN() { i_clipright=0 clipleft=0 clipright=0 for (i=0;i<=x_slices;i++) { var thiss=eval("document.s"+i) thiss.clip.left=clipleft thiss.clip.right=clipright thiss.clip.top=cliptop thiss.clip.bottom=clipbottom clipleft+=width_slice clipright=clipleft+i_clipright } if (i_picture>picture.length-1) {i_picture=0} getcontent() for (i=0;i<=x_slices;i++) { var thisinners=eval("document.s"+i+".document") thisinners.write(content) thisinners.close() } i_picture++ openlamellarNN() } document.write("<span id='whole' class='s'></span>") for (i=0;i<=x_slices;i++) { document.write("<span id='s"+i+"' class='s'></span>") } document.write("<div id='emptydiv' style='position:relative'>") document.close() window.onload=initiate function startnewtime() { starttime= new Date() starttime=starttime.getTime() } function checktime() { nowtime=new Date() nowtime=nowtime.getTime() nowtime=(nowtime-starttime)/1000 if (nowtime>stoptime) {timetohidescroller=true} } function startpause() { startpausetime=new Date() startpausetime=startpausetime.getTime() } function checkpausetime() { nowpausetime=new Date() nowpausetime=nowpausetime.getTime() nowpausetime=nowpausetime-startpausetime } function hidescroller() { if (document.all) { document.all.bgscroller.style.visibility="hidden" document.all.text.style.visibility="hidden" } if (document.layers) { document.bgscroller.visibility="hidden" document.text.visibility="hidden" } } function handlerMM(e){ x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY x=x+10 y=y+10 } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } if (document.all || document.layers) { document.onmousemove = handlerMM; } </script> <font size=2 color=black face=Verdana><b>Slideshow with with lamellar effect</b><br><br>This slideshow with unique lamellar transition effect will follow your cursor for ever and ever. Add as many images as you like. True copy-and-paste installation. Easy configuration. CROSSBROWSER, does not work with NN6.<br><br> <font color="Red"><b>Move your mouse to see the floating effect!</b></font><br><br><br> <br><br><br> <form> <b>Configuration:</b><br><br> <b>Step 1:</b> <a href="imgcursorslideshow.zip">Download this ZIP-File</a><br><br> <b>Step 2:</b> Unzip the testimages ('pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg') and the script-file 'imgcursorslideshow.js'. Put the testimages and the script-file 'imgcursorslideshow.js' into the same folder as your webpage.<br><br> <b>Step 3:</b> Open your webpage and paste the following code right above the <b></body></b>-tag:<br> <input type=button onClick="this.form.code1.focus();this.form.code1.select()" value="select all" style="font-size:8pt"><br> <textarea name="code1" cols="60" rows="6" style="font-size:8pt"> <style> .s { position:absolute; left:-5000px; topt:-5000px; } </style> <script> // your pictures. Add as many pictures a you like. var picture=new Array("pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg") // pause beween the pictures (seconds) var pause=2 // - End of JavaScript - --> </script> <script > var imgpreload=new Array for (i=0;i<=picture.length;i++) { imgpreload[i]=new Image() imgpreload[i].src=picture[i] } var x,y var horizontal_pos=0 var vertical_pos=0 var x_slices=6 var startpausetime var nowpausetime var starttime var nowtime var stoptime var timetohidescroller=false var textmovedtoleft=0 var picturewidth var pictureheight var i_loop=0 var i_picture=0 var width_slice var cliptop=0 var clipbottom var i_clipright=1 var content="" pause=pause*1000 function initiate() { getcontent() if (document.all) { for (i=0;i<=x_slices;i++) { var thisinners=eval("s"+i) thisinners.innerHTML=content var thiss=eval("document.all.s"+i+".style") thiss.posLeft=horizontal_pos thiss.posTop=vertical_pos } var thisspan = eval("document.all.s"+0) picturewidth=thisspan.offsetWidth pictureheight=thisspan.offsetHeight width_slice=Math.ceil(picturewidth/x_slices) clipbottom=pictureheight document.all.whole.style.posLeft=horizontal_pos document.all.whole.style.posTop=vertical_pos i_picture++ openlamellar() } if (document.layers) { for (i=0;i<=x_slices;i++) { var thisinners=eval("document.s"+i+".document") thisinners.write(content) thisinners.close() var thiss=eval("document.s"+i) thiss.left=horizontal_pos thiss.top=vertical_pos } var thisspan=eval("document.s"+0+".document") picturewidth=thisspan.width pictureheight=thisspan.height width_slice=Math.ceil(picturewidth/x_slices) clipbottom=pictureheight document.whole.document.write(" ") document.whole.document.close() document.whole.left=horizontal_pos document.whole.top=vertical_pos i_picture++ openlamellarNN() } } function openlamellar() { clipleft=-width_slice clipright=0 if (i_clipright<=width_slice) { for (i=0;i<=x_slices;i++) { var thiss=eval("document.all.s"+i+".style") thiss.posLeft=x thiss.posTop=y document.all.whole.style.posLeft=x document.all.whole.style.posTop=y thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" clipleft+=width_slice clipright=clipleft+i_clipright } i_clipright++ var timer=setTimeout("openlamellar()",20) } else { clearTimeout(timer) whole.innerHTML=content startpause() makepause() } } function makepause() { checkpausetime() if (nowpausetime<pause) { for (i=0;i<=x_slices;i++) { var thiss=eval("document.all.s"+i+".style") thiss.posLeft=x thiss.posTop=y document.all.whole.style.posLeft=x document.all.whole.style.posTop=y } var timer=setTimeout("makepause()",20) } else { clearTimeout(timer) changepicture() } } function makepauseNN() { checkpausetime() if (nowpausetime<pause) { for (i=0;i<=x_slices;i++) { var thiss=eval("document.s"+i) thiss.left=x thiss.top=y document.whole.left=x document.whole.top=y } var timer=setTimeout("makepauseNN()",20) } else { clearTimeout(timer) changepictureNN() } } function openlamellarNN() { clipleft=-width_slice clipright=0 if (i_clipright<=width_slice) { for (i=0;i<=x_slices;i++) { var thiss=eval("document.s"+i) thiss.left=x thiss.top=y document.whole.left=x document.whole.top=y thiss.clip.left=clipleft thiss.clip.right=clipright thiss.clip.top=cliptop thiss.clip.bottom=clipbottom clipleft+=width_slice clipright=clipleft+i_clipright } i_clipright++ var timer=setTimeout("openlamellarNN()",20) } else { clearTimeout(timer) document.whole.document.write(content) document.whole.document.close() startpause() makepauseNN() } } function getcontent() { content="<img src="+picture[i_picture]+" border=0>" } function changepicture() { i_clipright=0 clipleft=0 clipright=0 for (i=0;i<=x_slices;i++) { var thiss=eval("document.all.s"+i+".style") thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" } if (i_picture>picture.length-1) {i_picture=0} getcontent() for (i=0;i<=x_slices;i++) { var thisinners=eval("s"+i) thisinners.innerHTML=content } i_picture++ openlamellar() } function changepictureNN() { i_clipright=0 clipleft=0 clipright=0 for (i=0;i<=x_slices;i++) { var thiss=eval("document.s"+i) thiss.clip.left=clipleft thiss.clip.right=clipright thiss.clip.top=cliptop thiss.clip.bottom=clipbottom clipleft+=width_slice clipright=clipleft+i_clipright } if (i_picture>picture.length-1) {i_picture=0} getcontent() for (i=0;i<=x_slices;i++) { var thisinners=eval("document.s"+i+".document") thisinners.write(content) thisinners.close() } i_picture++ openlamellarNN() } document.write("<span id='whole' class='s'></span>") for (i=0;i<=x_slices;i++) { document.write("<span id='s"+i+"' class='s'></span>") } document.write("<div id='emptydiv' style='position:relative'>") document.close() window.onload=initiate function startnewtime() { starttime= new Date() starttime=starttime.getTime() } function checktime() { nowtime=new Date() nowtime=nowtime.getTime() nowtime=(nowtime-starttime)/1000 if (nowtime>stoptime) {timetohidescroller=true} } function startpause() { startpausetime=new Date() startpausetime=startpausetime.getTime() } function checkpausetime() { nowpausetime=new Date() nowpausetime=nowpausetime.getTime() nowpausetime=nowpausetime-startpausetime } function hidescroller() { if (document.all) { document.all.bgscroller.style.visibility="hidden" document.all.text.style.visibility="hidden" } if (document.layers) { document.bgscroller.visibility="hidden" document.text.visibility="hidden" } } function handlerMM(e){ x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY x=x+10 y=y+10 } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } if (document.all || document.layers) { document.onmousemove = handlerMM; } </script> <div id="emptydiv" style="position:relative">
IMPORTANT: Do not paste this code into tables or <DIV> and </DIV> or between any other container!

Step 4: Open your webpage and configure your pictures and the speed (red code below) on top of the script:
// your pictures. Add as many pictures a you like
var picture=new Array("pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg")
// pause beween the pictures (seconds)
var pause=2