Plurk FaceBook Twitter 收進你的MyShare個人書籤 MyShare
  顯示內嵌語法

【最新訊息快遞十】
網頁定位特效示範
2004.05.26

。黑暗的牆面上,要如何用滑鼠自由移動燭台,來照明牆面上的內容。
<HEAD>...</HEAD>內語法說明
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=big5">
// JavaScript 由此開始
<SCRIPT language=JavaScript>
   statId=0
   var deltaX, deltaY;
       posX=280
       posY=250
   d_fireX=50
   d_fireY=20    
//-------------------- 
function dn(){ 
  statId=1
  posX=candle.style.pixelLeft;   deltaX=event.x-posX
  posY=candle.style.pixelTop;    deltaY=event.y-posY

} 
//-------------------- 
function up(){ 
  statId=0 
  posX=candle.style.pixelLeft;    
  posY=candle.style.pixelTop;   

}
//-------------------- 
function doDrag(){ 
 if (statId==1){  
     candle.style.pixelLeft=event.x-deltaX 
     candle.style.pixelTop =event.y-deltaY 

	 
  bk.filters.light.clear() 	 
  fireX=event.x-deltaX+d_fireX
  fireY=event.y-deltaY+d_fireY
  bk.filters.light.addCone(fireX, fireY,200, fireX,fireY,255,255,255,99,90)   
  }
}
//-------------------- 
 function init(){
    bk.style.filter='light'
}
//-------------------- 
 function glow_on(){
   bk.filters.light.clear() 	
   bk.filters.light.addCone(posX+d_fireX,posY+d_fireY,200, posX+d_fireX,posY+d_fireY, 255,255,255, 99, 90) 
}
 function glow_out(){ 
   bk.filters.light.clear()
   init()
 }  
 //
</SCRIPT>
// JavaScript 到此結束
<TITLE>網頁定位特效示範</TITLE>
</HEAD>

<BODY>...<B/ODY>內語法說明
<BODY onload=init()> // 記得要在<BODY>內加上 onload=init()
<TABLE height="220" width="650" border="1"> // 這是表格(TABLE)語法,可自己調整大小
<TR><TD align=center id=bk onmousemove=doDrag() onmouseout=glow_out() onmouseover=glow_on() 
style="background-image: url('back2.jpg'); background-repeat: repeat; 
background-attachment: scroll; background-position: 0%"> // 這段是滑鼠移動光線及背景圖的語法,不可段行喔
<BR>
在這裡修改您想秀的內容或文字
<BR>
</SPAN>
<IMG  id=candle ondragstart=event.returnValue=false onmousedown=dn()  onmouseout=up() onmouseup=up() 
src="candle.gif"  border=0 style="CURSOR: default; LEFT: 70px; POSITION: absolute; TOP:200px; Z-INDEX: 2">
// 這段是滑鼠移動燭台及調整燭台圖檔位置的語法,不可段行喔
</TD></TR>
</TABLE>
[第一期電子報] [觀看實例示範] [第二期電子報]

© 網頁研習室【電子報】李文能 主編 ©