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