圖片跟隨鼠標JS代碼

【實例名稱】

圖片跟隨鼠標JS代碼

【實例描述】

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

【實例代碼】

<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"');
        //設置div的顯示位置-坐標和高度、寬度
 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);
       //鼠標移出邊界時的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;    
//綁定鼠標移動事件
    //動態輸出div和圖像-默認情況下圖像隱藏
    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>
 

【運行效果】

【難點剖析】

 本例的難點在于如何捕獲鼠標的位置。本例通過event．clientX和event.clientY獲取鼠標的x和y 坐標，然后設置圖片的隱藏和顯示，以達到圖片跟隨鼠標的效果。

【源碼下載】

本實例JS代碼下載