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