Ảnh tan vỡ dần

JavaScriptBank · 8/5/10

Hiệu ứng tạo một

You must be registered for see links

theo nguyên tắc từng mảng nhỏ của ảnh sau xuất hiện chồng lên ảnh trước trong một <a ...

You must be registered for see links

tại

You must be registered for see links

Demo:

You must be registered for see links

|

You must be registered for see links

Cách cài đặt

Bước 1: Mã CSS bên dưới dùng cho định dạng hiệu ứng, hãy copy nó vào phần HEAD của web
CSS

Mã:

<STYLE>
.spanstyle {
	LEFT: 0px; POSITION: absolute; width: 100%; text-align: center;
}
</STYLE>

Bước 2: Copy mã JavaScript bên dưới và dán vào khu vực HEAD trên trang web của bạn
JavaScript

Mã:

<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>

Bước 3: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML

Mã:

<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>

Một vài nhãn tương tự:

You must be registered for see links

,

You must be registered for see links

,

You must be registered for see links

,

You must be registered for see links

Bạn có thể xem thêm nhiều JavaScript khác về

You must be registered for see links

và

You must be registered for see links

-

You must be registered for see links

-

You must be registered for see links

Ảnh tan vỡ dần

JavaScriptBank

New member