圖片跟隨鼠標(biāo)JS代碼

【實(shí)例名稱】

圖片跟隨鼠標(biāo)JS代碼

【實(shí)例描述】

要在網(wǎng)頁中捕獲鼠標(biāo)的位置，需要借助于鼠標(biāo)的移動事件。本例將通過綁定鼠標(biāo)的移動事件．為鼠標(biāo)提供一個特效，讓圖片一直跟隨。

【實(shí)例代碼】

<SCRIPT LANGUAGE="JavaScript">
   var newtop=0;
   var newleft=0;
   divStyleRef="layer.style.";
   layerRef="document.all";
   mystyle=".style";
   function doMouseMove() 
   {
 layerName = 'myimg';    //獲取包裝圖片的div
 eval('var curElement='+layerRef+'["'+layerName+'"]');
 eval(layerRef+'["'+layerName+'"]'+mystyle+'.visibility="hidden"');
 eval('curElement'+mystyle+'.visibility="visible"');
        //設(shè)置div的顯示位置-坐標(biāo)和高度、寬度
 eval('newleft=document.body.clientWidth-curElement'+mystyle+'.pixelWidth');
 eval('newtop=document.body.clientHeight-curElement'+mystyle+'.pixelHeight');
 eval('height=curElement'+mystyle+'.height');
 eval('width=curElement'+mystyle+'.width');
 width=parseInt(width);
 height=parseInt(height);
       //鼠標(biāo)移出邊界時的div位置的判斷
 if (event.clientX > (document.body.clientWidth - 5 - width))
 {
 newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width;
 }
 else
 {
 newleft=document.body.scrollLeft + event.clientX;
 }
 eval('curElement'+mystyle+'.pixelLeft=newleft');
 if (event.clientY > (document.body.clientHeight - 5 - height))
 {
 newtop=document.body.clientHeight + document.body.scrollTop - 5 - height;
 }
 else
 {
 newtop=document.body.scrollTop + event.clientY;
 }
 eval('curElement'+mystyle+'.pixelTop=newtop');
    }
    document.onmousemove = doMouseMove;    
//綁定鼠標(biāo)移動事件
    //動態(tài)輸出div和圖像-默認(rèn)情況下圖像隱藏
    document.write('<div ID=mydiv>');
    document.write('<img ID=myimg src="LOGO1.gif"  
STYLE="position:absolute;TOP:0pt;LEFT:0pt;width=103;
height=28;Z-INDEX:2;visibility:hidden;">')
    document.write('</div>')
</SCRIPT>
 

【運(yùn)行效果】

【難點(diǎn)剖析】

 本例的難點(diǎn)在于如何捕獲鼠標(biāo)的位置。本例通過event．clientX和event.clientY獲取鼠標(biāo)的x和y 坐標(biāo)，然后設(shè)置圖片的隱藏和顯示，以達(dá)到圖片跟隨鼠標(biāo)的效果。

【源碼下載】

本實(shí)例JS代碼下載