Full version: jsB@nk » Image » Image viewer » Double ImageSlicer
URL: https://www.javascriptbank.com/double-imageslicer.html
The successor to ImageRunner! ImageSlicer slices your image into small stripes and rushes them from both sides of your browser-winow to their final position. The effect ist unique! No additional bandwidth needed. Very easy to configure.
Full version: jsB@nk » Image » Image viewer » Double ImageSlicer
URL: https://www.javascriptbank.com/double-imageslicer.html
<script><!-- Beginning of JavaScript -// CONFIGURATION:// You need only one image besides the script. You don't have// to slice the image yourself! The script will do this job for you.// Configure the script as follows:// 1. Copy and paste the two script-blocks into your HTML-file:// The first script-block should be inside the head-section of your HTML-file.//The second script-block should be inside the body-section.// 2.Put your image in the same directory as the HTML-file .// 3. Insert onLoad="initiate()" right into the body-tag.// 4. Configure the variables below:// The width of your image (pixels)var imgwidth=200// The height of your image (pixels)var imgheight=138// The URL of the sliced imagevar imgurl="logojs.gif"// Final horizontal position of the image: distance to the left margin of the window (pixels)// IMPORTANT: // if you want to center the image in the middle of the browser-window then write -1.// If you want to put the image on a absolute position // then write the number (for instance 223).var x_finalpos=-1// Final vertical position of the image: distance to the top margin of the windowvar y_finalpos=20// Total number of slicesvar imgslices=20// Speed of horizontal glidingvar step=40var pause=10// Do not edit the variables below this linevar x_rightspans=0var x_leftspans=0var marginrightvar marginleftvar height_slice=Math.floor(imgheight/imgslices)var cliptop=0var clipbottom=cliptop+height_slicevar clipleft=0var clipright=imgwidthvar spannummer=0var spannrbefore=0function initiate() {if (x_finalpos==-1) {x_finalpos=Math.floor(document.body.clientWidth/2)-Math.floor(imgwidth/2)}if (document.all) {moveslices_IE()}}function moveslices_IE() {if (x_rightspans==0 || x_leftspans==0) {if (x_rightspans==0) {for (i=0;i<=imgslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft-=step}if (thisspan.posLeft<=x_finalpos) {x_rightspans=1for (i=0;i<=imgslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft=x_finalpos}}}if (x_leftspans==0) {for (i=1;i<=imgslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft+=step}if (thisspan.posLeft>=x_finalpos) {x_leftspans=1for (i=1;i<=imgslices-1;i+=2) {var thisspan=eval("document.all.span"+i+".style")thisspan.posLeft=x_finalpos}}}var timer=setTimeout("moveslices_IE()",pause)}else {clearTimeout(timer)}}// - End of JavaScript - --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onLoad="initiate()" topmargin=100px;><script><!-- Beginning of JavaScript -for (i=0;i<=imgslices-1;i+=2) {marginright=document.body.clientWidth+50 document.write("<span id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginright+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")document.write("<img src='"+imgurl+"'>") document.write("</span>")cliptop+=2*height_sliceclipbottom+=2*height_slice}cliptop=height_sliceclipbottom=2*height_slicefor (i=1;i<=imgslices-1;i+=2) {marginleft=-imgwidth-50 document.write("<span id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginleft+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")document.write("<img src='"+imgurl+"'>") document.write("</span>")cliptop+=2*height_sliceclipbottom+=2*height_slice}// - End of JavaScript - --></script></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->