Metachecker.net
|
TrafficChecker.net
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Double ImageSlicer
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.
Insert into <HEAD>
<script> <!-- Beginning of JavaScript - // CREDITS: // ImageSlicer by Urs Dudli and Peter Gehrig // Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.24fun.ch. // info@24fun.ch // 2/16/2000 // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a hyperlink to http://www.24fun.ch on the webpage // where this script will be running. // 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 image var imgurl="imageslicer2.jpg" // 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 window var y_finalpos=20 // Total number of slices var imgslices=16 // Speed of horizontal gliding var step=40 var pause=10 // Do not edit the variables below this line var x_rightspans=0 var x_leftspans=0 var marginright var marginleft var height_slice=Math.floor(imgheight/imgslices) var cliptop=0 var clipbottom=cliptop+height_slice var clipleft=0 var clipright=imgwidth var spannummer=0 var spannrbefore=0 function 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=1 for (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=1 for (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>
Insert into <BODY>
<body onLoad="initiate()"> <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_slice clipbottom+=2*height_slice } cliptop=height_slice clipbottom=2*height_slice for (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_slice clipbottom+=2*height_slice } // - End of JavaScript - --> </script>
Other Options