Обсуждение некоего скрипта
Уважаемые участники форума! Большая просьба ко всем желающим помочь. Очень нужно, чтобы кто-то объяснил следующий скрипт, желательно каждую функчию в отдельности, а именно, что она делает, какая переменная для чего нужна. Буду Оччень благодарен. Заранее спасибо
З.Ы. Программа - прожектор, видит текст при наведении мыши на чёрный фон.
<html>
<head>
<!-- HEAD START HERE -->
<style type="text/css">
#divExCont {position:absolute; left:0px; top:0px; clip:rect(0px 0px 0px 0px); layer-background-color:#ffffff; background-color:#ffffff;}
#divCircle {position:absolute; z-index:500; visibility:hidden; width:170px;}
body {background-color:#000000; overflow:hidden;}
</style>
<script language="JavaScript" type="text/javascript">
/************************************************** ********************************
Spotlight
* Copyright (C) 2001 Thomas Brattli
* This script was released at WOscripts.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
************************************************** *******************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
/*** Variables to set ***/
sCircleWidth = 168 //The width the script will clip to
sCircleHeight = 168 //The height the script will clip to
sStarty = 200 //Where do you want it to initially start
sStartx = 200 //Where do you want it to initially start
clipSpeed = 20 //Number of pixels for each step in the animation.
/************************************************** ****************************
Making the clipobject part
************************************************** ****************************/
function makeObj(obj, nest, x, y){
nest = (!nest) ? "":'document.'+nest+'.';
this.css = bw.dom? document.getElementById(obj).style:bw.ie4?document .all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.evnt = bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
this.clip = b_clip;
this.clipIt = b_clipIt;
this.clipTo = b_clipTo;
this.obj = obj + "Object";
eval(this.obj + "=this");
return this;
}
// A unit of measure that will be added when setting the position or size of a layer.
var px = bw.ns4||window.opera?"":"px";
//clip part
function b_clipTo(t,r,b,l){
if (bw.ns4){
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+"px "+r+"px "+b+"px "+l+"px)";
}
}
function b_clipIt(tstop,rstop,bstop,lstop,step,fn){
if (!fn) fn = null
var clipval = new Array()
if (bw.dom || bw.ie4) {
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,b perstep,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+","+b curr+","+lcurr+","+tperstep+","
+rperstep+","+bperstep+","+lperstep+","+totantstep +","+antstep+",'"+fn+"')", 40)
}else{
this.clipactive = false
eval(fn)
}
}
/************************************************** ****************************
Initiating the page and the clip objects.
************************************************** ****************************/
function spotInit(){
pageWidth = (bw.ns4 || bw.ns6)?innerWidth:document.body.clientWidth;
pageHeight = (bw.ns4 || bw.ns6)?innerHeight:document.body.clientHeight;
oExCont = new makeObj('divExCont')
if (bw.dom || bw.ie4){
oExCont.css.width = pageWidth+px
oExCont.css.height = pageHeight+px
}
oCircle = new makeObj('divCircle','divExCont')
oExCont.clipTo(sStarty,sStartx+sCircleWidth,sStart y+sCircleHeight,sStartx)
oCircle.css.left = sStartx+px
oCircle.css.top = sStarty+px
oCircle.css.visibility = "visible"
if (bw.ns4)document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = moveCircle;
}
function moveCircle(e){
x = (bw.ns4 || bw.ns6)?e.pageX:event.x
y = (bw.ns4 || bw.ns6)?e.pageY:event.y
oExCont.clipTo(y-sCircleHeight/2, x+sCircleWidth/2, y+sCircleHeight/2, x-sCircleWidth/2)
oCircle.css.left = x - sCircleWidth/2 + px
oCircle.css.top = y - sCircleHeight/2 + px
}
//This is being called when someone clicks the circle.
function showCont(){
document.onmousemove = null
oCircle.css.visibility = "hidden"
oCircle.css.left = 0+px
oCircle.css.top = 0+px
oExCont.clipIt(-clipSpeed, pageWidth+clipSpeed, pageHeight+clipSpeed, -clipSpeed, clipSpeed, 'oExCont.css.overflow="auto"')
}
if (bw.bw) onload = spotInit
</script>
<!-- HEAD END HERE -->
</head>
<body bgcolor="#000000" topmargin="0" leftmargin="0">
<!-- BODY START HERE -->
<div id="divExCont">
<div id="divCircle"><a href="#" onclick="showCont(); return false" onfocus="if(this.blur)this.blur()"><img src="spotlight_circle.gif" width="170" height="170" alt="" border="0"></a></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<font face="arial,helvetica,sans-serif" size="2" color="#000000">Your regular body content goes here.</font>
</div>
<!-- BODY END HERE -->
</body>
</html>
|