聚光效果
| <head> <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:250} </style> <center> <style type="text/css"> <!-- BODY {font-size:9pt; color:white} select {font-size: 9pt ;color: red} input {font-size: 9pt ;color: ;bgcolor:red} td {font-size: 9pt ;color: red} th {font-size: 9pt ;color: red} textarea {font-size: 9pt ;color: red} //--> </STYLE> </head> <BODY BGCOLOR=# 000000 > <script> //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> <div id="divExCont"> <div id="divCircle"><a href="#" onclick="showCont(); if(ie)this.blur()"><img SRC="2323.gif" BORDER=0 height=200 width=200></a></div> <p align="center"><font color="#FF0000" size="6"> 聚光燈效果 </font></p> <CENTER> <FONT SIZE=+2 COLOR=04B127>按滑鼠左鍵打開視窗<FONT> </CENTER> <BR> <center> <table BORDER=2 WIDTH=80% CELLPADDING=3 CELLSPACING=0> <tr><td BGCOLOR="#D5FFFF"><font color=blue><b><CENTER><FONT SIZE=+3> JavaScript 程式原始檔 </CENTER> </b> </font></font></td></tr> <tr><td BGCOLOR="#FFFFD5" ALIGN=CENTER> <form NAME="copy"> <textarea NAME="txt" ROWS=15 COLS=65 WRAP=VIRTUAL> <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:250} </style> <script> //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> <div id="divExCont"> <div id="divCircle"><a href="#" onclick="showCont(); if(ie)this.blur()"><img SRC="2323.gif" BORDER=0 height=200 width=200></a></div> <center> </textarea><br> </table> </center> </div> </center> |