130、综合的按钮

130、综合的按钮

脚本说明:

把如下代码加入<body>区域中

<style type="text/css">

#divExCont {position:absolute; left:0px; top:0px; clip:rect(0,0,0,0); 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">

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;

}

//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,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+"')", 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

              oExCont.css.height = pageHeight

       }

       oCircle = new makeObj('divCircle','divExCont')

       oExCont.clipTo(sStarty,sStartx+sCircleWidth,sStarty+sCircleHeight,sStartx)

       oCircle.css.left = sStartx

       oCircle.css.top = sStarty

       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

       oCircle.css.top = y-sCircleHeight/2

}

//This is being called when someone clicks the circle.

function showCont(){

       document.onmousemove = null

       oCircle.css.visibility = "hidden"

       oCircle.css.left = 0

       oCircle.css.top = 0

       oExCont.clipIt(-clipSpeed, pageWidth+clipSpeed, pageHeight+clipSpeed, -clipSpeed, clipSpeed, 'oExCont.css.overflow="auto"')

}

 

if (bw.bw) onload = spotInit

</script>

 

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

 

Write a comment

Comments: 0