javascript實現(xiàn)圖片跟隨鼠標移動效果
原貼：http://hi.baidu.com/kira870924/blog/item/16c0e64af6720c2708f7efda.html
我們常在一些網(wǎng)站中看到，鼠標在網(wǎng)頁上移到時,，有一行文字,、一張小圖片或一個小動畫總是跟著鼠標，除非把鼠標移出頁面,，否則,，它就總是緊跟鼠標不放。你知道這種效果是怎么做出來的嗎,？你可能感到比較復雜,。其實它是用Javascript編一段小程序來實現(xiàn)的,，且程序也不長，也比較好理解,。下面讓我們來揭下它的面紗看看,。
程序思路：圖層可以用絕對坐標來確定其在頁面中的位置，那么我們把圖片,、動畫或文字放到圖層上,，再想辦法動態(tài)獲取鼠標的當前位置，再把圖層移到鼠標的當前位置,，那圖層上的內容（圖片,、動畫或文字）不也就移到當前鼠標的位置了嗎？這樣就達到了圖片,、動畫或文字隨鼠移動的目的了。
一,、一個簡單的圖片,、動畫或文字隨鼠標移動的例子
制作方法：
1、在 Dreamweaver3中,，插入一個圖層,，在圖層上寫上要跟隨鼠標移到的文字或圖片。
2,、在圖層的屬性面板上把“Layer ID”（圖層的ID號）改為“div1”,，以便程序操作；“T”值改為“-50”,，使其初始位置在頁面外,；“Z-index”（層序號）值改為“50”,，使其在最上層，不被其它層遮蓋,。完成后的圖層代碼如下,，不是使用 Dreamweaver的網(wǎng)友可把代碼復制到<body>標記的后面：
<div id="div1" style="position:absolute; left:250px; top:118px; width:60px; height:37px; z-index:"50"><img src="image/0050.gif" width="32" height="32">圖、文跟鼠標試驗</div> ,，這里的圖片和文字可換成你所需要的,。
3、在<head>與</head>之間加上這樣一段程序：
<SCRIPT language="javascript">
<!--
var x,y; //聲明存放當前鼠標位置坐標的變量
var can=0 //聲明能否移動的控制變量
function canmove() { //控制能否移動的函數(shù)
x=document.body.scrollLeft+event.clientX; //獲取當前鼠標位置的X坐標
y=document.body.scrollTop+event.clientY; //獲取當前鼠標位置的Y坐標
can=1;} //設置為可以移動
function move() { //移動圖層的函數(shù)
if (can) {
div1.style.posLeft=x+20; //設置圖層位置的X坐標
div1.style.posTop=y;} // 設置圖層位置的Y坐標
改（這里還應該加上一句canmove();）
setTimeout("move()",30)} //每30毫秒刷新一次圖層位置坐標
-->
</SCRIPT>
只要這幾行代碼就能使圖片或文字跟著鼠標跑,，有點出乎意料吧,！事實就是這么簡單。當然,，這是最簡單的一種,，你可能看到的有些網(wǎng)頁上的效果在移動的過程比這要復雜一些，但都是在這個基礎上增加一些移動的變化過程而已,。
4,、當然要使真正的效果出現(xiàn)，還得在<body>標記中加上觸發(fā)事件調用程序,，使程序動作起來,。在<body>標記中加上代碼：onload="move()" onmousemove="canmove()"，前一個函數(shù)的作用是在網(wǎng)頁加載時就調用“move()”程序,，使其開始刷新圖層的位置坐標,；后一個事件的作用是，一旦在頁面上移動鼠標,，就重新計算它的位置坐標,。
二、稍復雜一點的效果
在上例的基礎上稍作一些改動,，可獲得更好的效果,，如使“歡迎光臨！”這幾個字不僅是分開移動,，在移到新位置后,，還不停地左右移動，似乎在列隊歡迎,。要實現(xiàn)移動過程的變化,，就要把每個文字分開，一個圖層放一個字（或一張圖片）,，然后分開移動到新的位置,。所以為了方便，用數(shù)組來存放圖層的位置坐標,。另外,，由于圖層較多,，插入圖層比較麻煩，也會使代碼大增加,，因此采用了動態(tài)編寫圖層代碼的辦法,。制作方法如下：
1、在<head>與</head>之間插入下面這段程序：
<SCRIPT language="javascript">
<!--
var x,y
var step=20
var can=0
var information="歡迎光臨,！"; //在這里寫入跟隨鼠標移動的文字
information=information.split(""); //把字符串拆分成單個的文字
Il=information.length; //獲取字符的個數(shù)，存放在Il變量中
k=0;
var xpos=new Array() //聲明一個數(shù)組,，存放各圖層的X位置坐標
for (i=0;i<=Il-1;i++){ //給數(shù)組賦初值
xpos[i]=-50}
var ypos=new Array() //聲明一個數(shù)組,，存放各圖層的Y位置坐標
for (i=0;i<=Il-1;i++){ //給數(shù)組賦初值
ypos[i]=-50}
function canmove() {
x=document.body.scrollLeft+event.clientX;
y=document.body.scrollTop+event.clientY;
can=1; k=0;step=20}
function move() {
if (can) {
k++;
if (k<20) {step++;}else
if (k<40) {step--;}else {k=0;} //計算圖層左右移動的偏移量
for (i=Il-1;i>=1;i--){ //計算各圖層在新位置的X、Y坐標
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1]}
xpos[0]=x+step;
ypos[0]=y
for (i=0;i<Il-1;i++){ //改變各圖層位置的X,、Y坐標,，使其移到新的位置
var thisdiv=eval("div"+(i)+".style");
thisdiv.posLeft=xpos[i];
thisdiv.posTop=ypos[i]}}
setTimeout("move()",30)} //每30秒刷新一次
-->
</SCRIPT>
2、在<body>標記的后面加上這段程序：
<script language="Javascript">
<!--
for (i=0;i<=Il-1;i++){
document.write("<div id='div"+i+"' style='position:absolute;top:-50px; font-size: 9pt;font-weight: 800; color: #0000FF'>"+information[i]+"</div>");
}
-->
</script>
這段程序的作用是動態(tài)自動編寫存放移動文字圖層的HTML代碼,，并把相應的文字寫在上面。
3,、在<body>標記中加上代碼：onload="move()" onmousemove="canmove()",。
這樣在瀏覽器中，“歡迎光臨,！”這幾個字就會緊跟鼠標移動，到達新位置后還會左右移動,。若是把《三維環(huán)繞文字效果制作》一文中的文字移動效果用在本例上,，則文字就會繞著鼠標位置旋轉。我想現(xiàn)在不會再感到這種效果有什么神秘了吧,？,！
字號：大 中 小 
