Home + Webmaster + Script + Javascript + Grafica e Immagini + Effetto Faro

Effetto Faro

Uno script che crea un effetto faro, ossia il documento risulta nero e il "faro" che sarà guidato dal mouse illuminerà la parte di schermo desiderata.

Download codice sorgente

<html>
<head>
<title>Effetto faro</title>
<style>
TD{font-family:arial,helvetica; font-size:10pt}
body{background-color:black}
A{color:Navy; text-decoration:none}
A:hover{color:red}
A:visited:{color:#808080}
#divExCont{position:absolute; left:-1; top:-1; clip:rect(0,0,0,0); layer-background-color:white; background-color:white}
#divCircle{position:absolute; z-index:500; visibility:hidden; width:200}
</style>
<script>
/********************************************************************************
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit www.bratta.com/dhtml for more great scripts. This may be used freely as 
long as this msg is intact! I'd appriciate any links to my page.
********************************************************************************/
//Easy browsercheck.
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;	
/******************************************************************************
Making the clipobject part
******************************************************************************/	
function makeObj(obj,nest,x,y){
	nest=(!nest) ? '':'document.'+nest+'.'										
	this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')												
	this.clipIt=b_clipIt; this.clip=b_clip;
	this.clipTo=b_clipTo;				
	this.obj = obj + "Object"; 	eval(this.obj + "=this")						
	return this
}
//clip part
function b_clipTo(t,r,b,l){
	if(n){this.css.clip.top=t;this.css.clip.right=r;this.css.clip.bottom=b;this.css.clip.left=l
	}else{
		this.css.clip="rect("+t+","+r+","+b+","+l+")";
	}
}
function b_clipIt(tstop,rstop,bstop,lstop,step,fn){
	if(!fn) fn=null
	var clipval=new Array()
	if(ie) {
		clipval=this.css.clip
		clipval=clipval.slice(5,clipval.length-1);
		clipval=clipval.split(' ')
		for(var i=0;i<4;i++){clipval[i]=parseInt(clipval[i])}
	}else{
		clipval[0]=this.css.clip.top
	    clipval[1]=this.css.clip.right
	    clipval[2]=this.css.clip.bottom
	    clipval[3]=this.css.clip.left
	}	totantstep=Math.max(Math.max(Math.abs((tstop-clipval[0])/step),Math.abs((rstop-clipval[1])/step)),
		Math.max(Math.abs((bstop-clipval[2])/step),Math.abs((lstop-clipval[3])/step)))
	if(!this.clipactive)
		this.clip(clipval[0],clipval[1],clipval[2],clipval[3],(tstop-clipval[0])/totantstep,
			(rstop-clipval[1])/totantstep,(bstop-clipval[2])/totantstep,				(lstop-clipval[3])/totantstep,totantstep,0, fn)
}
function b_clip(tcurr,rcurr,bcurr,lcurr,tperstep,rperstep,bperstep,lperstep,totantstep,antstep, fn){
	tcurr=tcurr+tperstep; rcurr=rcurr+rperstep
	bcurr=bcurr+bperstep; lcurr=lcurr+lperstep
	this.clipTo(tcurr,rcurr,bcurr,lcurr)
	if(antstep<totantstep){
		this.clipactive=true
		antstep++		setTimeout(this.obj+".clip("+tcurr+","+rcurr+","+bcurr+","+lcurr+","+tperstep+","			+rperstep+","+bperstep+","+lperstep+","+totantstep+","+antstep+",'"+fn+"')",50)	
	}else{
		this.clipactive=false
		eval(fn)
	}
}
/******************************************************************************
Initiating the page and the clip objects.
******************************************************************************/	
function spotInit(){
	pageWidth=(n)?innerWidth:document.body.offsetWidth;
	pageHeight=(n)?innerHeight:document.body.offsetHeight;
	oExCont=new makeObj('divExCont')
	oExCont.clipTo(0,0,0,0)
	if(ie){oExCont.css.width=pageWidth+10;oExCont.css.height=pageHeight+10}
	oCircle=new makeObj('divCircle','divExCont')
	oCircle.css.visibility="visible"
	if(n)document.captureEvents(Event.MOUSEMOVE)
	document.onmousemove=moveCircle;
}
function moveCircle(e){
	x=(n)?e.pageX:event.x;y=(n)?e.pageY:event.y
	oExCont.clipTo(y-100,x+100,y+100,x-100)
	oCircle.css.left=x-100;oCircle.css.top=y-100
}
//This is being called when someone clicks the circle.
function showCont(){
	document.onmousemove=null
	oCircle.css.visibility="hidden"
	oExCont.clipIt(-20,pageWidth+20,pageHeight+20,-20,20)
}
onload=spotInit;
</script>
</head>
<body bgcolor="Black" marginwidth="0" scroll="NO" onscroll="window.scroll(0,0)" marginheight="0">
<div id="divExCont">
	<div id="divCircle">
		<a href="#" onclick="showCont(); if(ie)this.blur()"><img src="black_circle.gif" width=234 height=241 border="0"></a>
	</div>

<center><br><br><br>
<br><br><h1>4you Gratis!</h1></center>
</div>
</body>
</html>

Compatibilità: MsIE | Netscape

Javascript

Altre risorse:
Libri Javascript | Manuale Javascript

E-Learning Scopri il catalogo dei corsi, da quello per webmaster a quelli di programmazione avanzata!

Webmaster Avanzato Percorso completo volto a formare dei professionisti del Web. Come si lavora in uno Staff?

Fai fruttare il tuo sito! Diventa oggi stesso un affiliato Trade Doubler e guadagna qualche soldino con il tuo sito web.