JavaScriptBank
05-07-2010, 08:25 PM
Good and Nice JavaScripts
Image Rotation with new transition and dissolving effect
This image (http://www.javascriptbank.com/javascript/image/) rotation (http://www.javascriptbank.com/javascript/image/rotation/) system creates a dissolving effect for the transition phase. Great for banners, picture-presentations and... detail (http://www.javascriptbank.com/image-rotation-with-new-transition-and-dissolving-effect.html/en//) at JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)
http://www.javascriptbank.com/javascript.images/image/image-rotation-with-new-transition-and-dissolving-effect.jpg (http://www.javascriptbank.com/javascript/image/rotation/image-rotation-with-new-transition-and-dissolving-effect/preview/en/)
Demo: JavaScript Image Rotation with new transition and dissolving effect (http://www.javascriptbank.com/image-rotation-with-new-transition-and-dissolving-effect.html/en/)
How to setup
Step 1: Place CSS below in your HEAD section
CSS
<STYLE>
.spanstyle {
LEFT: 0px; POSITION: absolute; width: 100%; text-align: center;
}
</STYLE>
Step 2: Place JavaScript below in your HEAD section
JavaScript
<SCRIPT>
<!-- Beginning of JavaScript -
// CONFIGURATION:
// 1. Copy the two script-blocks:
// Paste the first script-block inside the head-section of your HTML-file.
// Insert the second script-block into the body-section.
// 2. Copy the style-block and paste it into the head-section of your HTML-file.
// 3. Put your images into the same directory as the HTML-file.
// You may add as many images as you like.
// 4. Insert 'onLoad="checkbrowser()"' into the body-tag.
// 5. Configure the variables below:
// The width of your images (pixels)
var imgwidth=800
// The height of your images (pixels)
var imgheight=250
// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="logojs.gif"
imgname[1]="photo1.jpg"
imgname[2]="photo2.jpg"
imgname[3]="photo3.jpg"
// This block will preload your images. Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgname[i]
}
// Where should those images be linked to?
// Add an URL for each image.
// If you don't want to add an URL just write '#' instead of
// the URL, see sample imgurl[2].
var imgurl=new Array()
imgurl[0]="http://javascriptbank.com"
imgurl[1]="http://www.javascriptbank.com"
imgurl[2]="http://javascriptbank.com"
imgurl[3]="http://www.javascriptbank.com"
// Final horizontal position of the image: distance to the left margin of the window
var x_finalpos=30
// Final vertical position of the image: distance to the top margin of the window
var y_finalpos=30
// Number of sliced cells (the higher this number the slower the visual effect)
var x_slices=10
// Number of sliced rows (the higher this number the slower the visual effect)
var y_slices=8
// Standstill between the images (microseconds)
var pause=2500
// Do not change the variables below
var xy_slices=x_slices*y_slices
var randomorder=new Array()
for (i=0;i<=xy_slices-1;i++) {
randomorder[i]=i
}
var speed=20
var i_images=0
var width_slice=Math.floor(imgwidth/x_slices)
var height_slice=Math.floor(imgheight/y_slices)
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
var x_random=new Array()
var y_random=new Array()
var max_explsteps=15
var i_explsteps=0
function checkbrowser() {
if (document.all) {
initiate()
}
if (document.layers) {
rotatenetscape()
}
}
function initiate() {
if (document.all) {
spancounter=0
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
thisspan.posLeft=x_finalpos
thisspan.posTop=y_finalpos
thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright+=width_slice
spancounter++
}
clipleft=0
clipright=width_slice
cliptop+=height_slice
clipbottom+=height_slice
}
for (i=0;i<=xy_slices-1;i++) {
var thisspan=eval("span"+i)
thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"
}
var timer=setTimeout("changeimage()",pause)
}
}
function dissolveimg() {
if (i_loop<=xy_slices-1) {
var thisspan=eval("span"+randomorder[i_loop])
thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"
i_loop++
var timer=setTimeout("dissolveimg()",speed)
}
else {
clearTimeout(timer)
var timer=setTimeout("changeimage()",pause)
}
}
function changeimage() {
getrandomorder(xy_slices)
i_loop=0
i_images++
if (i_images>=imgname.length) {i_images=0}
dissolveimg()
}
function getrandomorder(range) {
for (i=0;i<=range;i++) {
var firstvalue= Math.floor(range*Math.random())
var secondvalue= Math.floor(range*Math.random())
var cachevalue=randomorder[firstvalue]
randomorder[firstvalue]=randomorder[secondvalue]
randomorder[secondvalue]=cachevalue
}
}
function rotatenetscape() {
document.imgcontainer1.document.write("<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>")
document.imgcontainer1.document.close()
i_images++
if (i_images>imgname.length-1) {i_images=0}
var timer=setTimeout("rotatenetscape()",pause)
}
// - End of JavaScript - -->
</SCRIPT>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
<BODY onload=checkbrowser()>
<SCRIPT>
<!-- Beginning of JavaScript -
if (document.all) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
document.write("<div id='span"+spancounter+"' class='spanstyle'>")
document.write("</div>")
spancounter++
}
}
}
if (document.layers) {
document.write("<div id='imgcontainer1' class='spanstyle'>")
document.write("</div>")
document.close()
document.imgcontainer1.left=x_finalpos
document.imgcontainer1.top=y_finalpos
}
// - End of JavaScript - -->
</SCRIPT>
</BODY>
Javascript Music Player (http://www.javascriptbank.com/web-based-music-player.html/en/) - Random Text Generator (http://www.javascriptbank.com/random-text-generator.html) - Floating Image Script (http://www.javascriptbank.com/up-down-floating-image.html)
The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.
Image Rotation with new transition and dissolving effect
This image (http://www.javascriptbank.com/javascript/image/) rotation (http://www.javascriptbank.com/javascript/image/rotation/) system creates a dissolving effect for the transition phase. Great for banners, picture-presentations and... detail (http://www.javascriptbank.com/image-rotation-with-new-transition-and-dissolving-effect.html/en//) at JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)
http://www.javascriptbank.com/javascript.images/image/image-rotation-with-new-transition-and-dissolving-effect.jpg (http://www.javascriptbank.com/javascript/image/rotation/image-rotation-with-new-transition-and-dissolving-effect/preview/en/)
Demo: JavaScript Image Rotation with new transition and dissolving effect (http://www.javascriptbank.com/image-rotation-with-new-transition-and-dissolving-effect.html/en/)
How to setup
Step 1: Place CSS below in your HEAD section
CSS
<STYLE>
.spanstyle {
LEFT: 0px; POSITION: absolute; width: 100%; text-align: center;
}
</STYLE>
Step 2: Place JavaScript below in your HEAD section
JavaScript
<SCRIPT>
<!-- Beginning of JavaScript -
// CONFIGURATION:
// 1. Copy the two script-blocks:
// Paste the first script-block inside the head-section of your HTML-file.
// Insert the second script-block into the body-section.
// 2. Copy the style-block and paste it into the head-section of your HTML-file.
// 3. Put your images into the same directory as the HTML-file.
// You may add as many images as you like.
// 4. Insert 'onLoad="checkbrowser()"' into the body-tag.
// 5. Configure the variables below:
// The width of your images (pixels)
var imgwidth=800
// The height of your images (pixels)
var imgheight=250
// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="logojs.gif"
imgname[1]="photo1.jpg"
imgname[2]="photo2.jpg"
imgname[3]="photo3.jpg"
// This block will preload your images. Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgname[i]
}
// Where should those images be linked to?
// Add an URL for each image.
// If you don't want to add an URL just write '#' instead of
// the URL, see sample imgurl[2].
var imgurl=new Array()
imgurl[0]="http://javascriptbank.com"
imgurl[1]="http://www.javascriptbank.com"
imgurl[2]="http://javascriptbank.com"
imgurl[3]="http://www.javascriptbank.com"
// Final horizontal position of the image: distance to the left margin of the window
var x_finalpos=30
// Final vertical position of the image: distance to the top margin of the window
var y_finalpos=30
// Number of sliced cells (the higher this number the slower the visual effect)
var x_slices=10
// Number of sliced rows (the higher this number the slower the visual effect)
var y_slices=8
// Standstill between the images (microseconds)
var pause=2500
// Do not change the variables below
var xy_slices=x_slices*y_slices
var randomorder=new Array()
for (i=0;i<=xy_slices-1;i++) {
randomorder[i]=i
}
var speed=20
var i_images=0
var width_slice=Math.floor(imgwidth/x_slices)
var height_slice=Math.floor(imgheight/y_slices)
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
var x_random=new Array()
var y_random=new Array()
var max_explsteps=15
var i_explsteps=0
function checkbrowser() {
if (document.all) {
initiate()
}
if (document.layers) {
rotatenetscape()
}
}
function initiate() {
if (document.all) {
spancounter=0
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
thisspan.posLeft=x_finalpos
thisspan.posTop=y_finalpos
thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright+=width_slice
spancounter++
}
clipleft=0
clipright=width_slice
cliptop+=height_slice
clipbottom+=height_slice
}
for (i=0;i<=xy_slices-1;i++) {
var thisspan=eval("span"+i)
thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"
}
var timer=setTimeout("changeimage()",pause)
}
}
function dissolveimg() {
if (i_loop<=xy_slices-1) {
var thisspan=eval("span"+randomorder[i_loop])
thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"
i_loop++
var timer=setTimeout("dissolveimg()",speed)
}
else {
clearTimeout(timer)
var timer=setTimeout("changeimage()",pause)
}
}
function changeimage() {
getrandomorder(xy_slices)
i_loop=0
i_images++
if (i_images>=imgname.length) {i_images=0}
dissolveimg()
}
function getrandomorder(range) {
for (i=0;i<=range;i++) {
var firstvalue= Math.floor(range*Math.random())
var secondvalue= Math.floor(range*Math.random())
var cachevalue=randomorder[firstvalue]
randomorder[firstvalue]=randomorder[secondvalue]
randomorder[secondvalue]=cachevalue
}
}
function rotatenetscape() {
document.imgcontainer1.document.write("<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>")
document.imgcontainer1.document.close()
i_images++
if (i_images>imgname.length-1) {i_images=0}
var timer=setTimeout("rotatenetscape()",pause)
}
// - End of JavaScript - -->
</SCRIPT>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
<BODY onload=checkbrowser()>
<SCRIPT>
<!-- Beginning of JavaScript -
if (document.all) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
document.write("<div id='span"+spancounter+"' class='spanstyle'>")
document.write("</div>")
spancounter++
}
}
}
if (document.layers) {
document.write("<div id='imgcontainer1' class='spanstyle'>")
document.write("</div>")
document.close()
document.imgcontainer1.left=x_finalpos
document.imgcontainer1.top=y_finalpos
}
// - End of JavaScript - -->
</SCRIPT>
</BODY>
Javascript Music Player (http://www.javascriptbank.com/web-based-music-player.html/en/) - Random Text Generator (http://www.javascriptbank.com/random-text-generator.html) - Floating Image Script (http://www.javascriptbank.com/up-down-floating-image.html)
The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.