« »

Hiệu ứng tạo ra các hộp thoại chứa các liên kết di chuyển khắp nơi trong trang web, các hộp thoại này khi va chạm với mặt trong của trình duyệt sẽ quay trở lại và đổi hướng.

Nhãn: khung chữ, bay, di chuyển, hộp thoại, va chạm, trình duyệt, đổi hướng

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Mã nguồn
JavaScript
HTML
In

Copy All x2

<SCRIPT>
<!-- Beginning of JavaScript -
// FlyingMessages

// Floating messages. Add as many messages as you like.
// ATTENTION: Too many images may slow down the floating effect.
var message=new Array()
message[0]="Text JavaScript effects"
message[1]="Image JavaScript effects"
message[2]="Scroller JavaScript effects"
message[3]="Game JavaScript effects"

// You may add a link for each message.
// In case you do not want to link a message just add a '#' instead of an URL
var message_link=new Array()
message_link[0]="http://JavaScriptBank.com/javascript/text-javascript.html"
message_link[1]="http://JavaScriptBank.com/javascript/image-javascript.html"
message_link[2]="http://JavaScriptBank.com/javascript/scroller-javascript.html"
message_link[3]="http://JavaScriptBank.com/javascript/game-javascript.html"

// font-family for each message
var message_font=new Array()
message_font[0]="Comic Sans MS"
message_font[1]="Times"
message_font[2]="Courier"
message_font[3]="Verdana"
message_font[4]="Arial"

// font-size for each message
var message_fontsize=new Array()
message_fontsize[0]=14
message_fontsize[1]=12
message_fontsize[2]=10
message_fontsize[3]=9
message_fontsize[4]=8

// font-color for each message
var message_fontcolor=new Array()
message_fontcolor[0]="yellow"
message_fontcolor[1]="black"
message_fontcolor[2]="FF0000"
message_fontcolor[3]="007700"
message_fontcolor[4]="000077"

// backgroundcolor for each message
var message_bgcolor=new Array()
message_bgcolor[0]="black"
message_bgcolor[1]="yellow"
message_bgcolor[2]="FFDDDD"
message_bgcolor[3]="DDFFDD"
message_bgcolor[4]="DDDDFF"

// font-weight for each message. Choose a value between 1 and 9
var message_fontweight=new Array()
message_fontweight[0]=1
message_fontweight[1]=9
message_fontweight[2]=5
message_fontweight[3]=7
message_fontweight[4]=9

// width for each message (pixels)
var message_width=new Array()
message_width[0]=300
message_width[1]=200
message_width[2]=300
message_width[3]=200
message_width[4]=100

// padding for each message (pixels)
var message_padding=new Array()
message_padding[0]=4
message_padding[1]=4
message_padding[2]=4
message_padding[3]=4
message_padding[4]=3

// padding for each message (pixels)
var message_border=new Array()
message_border[0]=1
message_border[1]=1
message_border[2]=1
message_border[3]=1
message_border[4]=1

// average speed of the floating images. Higher means faster
var floatingspeed=3

// do not edit the variables below
var tempo=20
var numberofmessages=message.length-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofmessages;i++) {
	stepx[i]=randommaker(floatingspeed)
	stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
for (i=0;i<=numberofmessages;i++) {
	imgwidth[i]=10
	imgheight[i]=10
}
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
for (i=0;i<=numberofmessages;i++) {
    message_fontweight[0]=100*message_fontweight[0]
    message_fontweight[1]=100*message_fontweight[1]
    message_fontweight[2]=100*message_fontweight[2]
    message_fontweight[3]=100*message_fontweight[3]
    message_fontweight[4]=100*message_fontweight[4]
}

var spancontent=new Array()
for (i=0;i<=numberofmessages;i++) {
    spancontent[i]="<table border="+message_border[i]+" cellpadding="+message_padding[i]+" width="+message_width[i]+" cellspacing=0><tr><td valign=top bgcolor="+message_bgcolor[i]+">"
    spancontent[i]+="<span style='position:relative; font-family:"+message_font[i]+";font-size:"+message_fontsize[i]+"pt;font-weight:"+message_fontweight[i]+"'>"	
    spancontent[i]+="<a href='"+message_link[i]+"' style='text-decoration:none'>"
    spancontent[i]+="<font color="+message_fontcolor[i]+">"
    spancontent[i]+=message[i]
    spancontent[i]+="</a>"
    spancontent[i]+="</span>"
    spancontent[i]+="</td></tr></table>"
}

function setValues() {
	if (document.all) {
    	marginbottom=document.body.clientHeight-5
    	marginright=document.body.clientWidth-5
		for (i=0;i<=numberofmessages;i++) {             
			var thisspan = eval("document.all.span"+i)
    		thisspan.innerHTML=spancontent[i]
			var thisspan = eval("document.all.span"+(i)+".style")
           	thisspan.posLeft=randommaker(marginright)
			thisspan.posTop=randommaker(marginbottom)  
		}
		for (i=0;i<=numberofmessages;i++) {
			var thisspan = eval("document.all.span"+i)
			imgwidth[i]=thisspan.offsetWidth
			imgheight[i]=thisspan.offsetHeight
			
		}
		checkmovement()
	}
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovement() {
	if (document.all) {
		checkposition()
		movepictures()
    	timer=setTimeout("checkmovement()",tempo)
	}
}

function movepictures() {
		if (document.all) {
			for (i=0;i<=numberofmessages;i++) {  
    			var thisspan=eval("document.all.span"+(i)+".style")
    			thisspan.posLeft+=stepx[i]
				thisspan.posTop+=stepy[i]
    		}
		}
}

function checkposition() {
	if (document.all) {
		for (i=0;i<=numberofmessages;i++) {             
			var thisspan=eval("document.all.span"+i+".style")
			if (thisspan.posLeft>marginright-imgwidth[i]) {
				thisspan.posLeft-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.posLeft<marginleft) {
				thisspan.posLeft+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.posTop>marginbottom-imgheight[i]) {
				thisspan.posTop-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

			}
			if (thisspan.posTop<margintop) {
				thisspan.posTop+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
}

// - End of JavaScript - -->
</SCRIPT>

Copy All x2

<BODY id=thisbody onload=setValues()>
<SCRIPT>
<!-- Beginning of JavaScript -

for (i=0;i<=numberofmessages;i++) {
    document.write("<span id='span"+i+"' style='position:absolute;z-index:100'></span>")
    document.close()
}

// - End of JavaScript - -->
</SCRIPT>
</BODY>