jquery 簡短幾句代碼實現(xiàn)給元素動態(tài)添加及獲取提示信息

更新時間：2011年09月01日 20:30:08 作者：

雖然是很基本的東西，但為什么很基本的方法就可以實現(xiàn)的東西有些人偏偏還要去追求復(fù)雜高深難懂的呢？這里只是交流而已

還是要首先引用JQ框架。

然后來看看效果：(連接添加不上)只能暫時看哈圖片，具體效果可參見我博客左方“My Box”中的“玩游戲”：

下面代碼中有具體注釋。

再來看看代碼：

復(fù)制代碼代碼如下:

 
<div id="_gameinfo" style="width:158px; border:1px #FFC solid; background-color:#FFF; position:fixed; z-index:101; display:none;padding:1px;"> 
</div> 
<div id="thegameBox" style="text-align:center;"> 
<a href="javascript:;" alt="WASD鍵控制小女孩移動，方向鍵控制小男孩的移動，不同顏色的陷阱只能容納不同顏色的人通過哦！" name="binghuoren">深林冰火人</a> 
<a href="javascript:;" alt="鼠標(biāo)點擊抓東西。" name="zhishangqiu">智商球3</a> 
<a href="javascript:;" alt="鼠標(biāo)操作，移動鼠標(biāo)控制機械手移動，點擊左鍵釋放磁吸力抓住貨物。" name="yunshuchuan">船長的運輸船</a> 
</div> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#thegameBox a").mousemove(function(ev){ 
var _Imgsrc="/upload/201109/20110901202741350.jpg";//這里需要將元素name設(shè)置和你的圖片名字一樣 
var _Ways=$(this).attr("alt");//獲取當(dāng)前鼠標(biāo)指著的元素的alt 
$("#_gameinfo").show();//顯示提示層 
if(!ev){ev=window.event;};//檢測是否為IE 
document.getElementById("_gameinfo").style.left=(ev.clientX+10)+"px";//設(shè)置提示信息left為鼠標(biāo)的X軸距離+10px 
document.getElementById("_gameinfo").style.top=(ev.clientY+10)+"px";//設(shè)置提示信息top為鼠標(biāo)的X軸距離+10px 
$("#_gameinfo").html('<img src="'+_Imgsrc+'" alt="" width="158" height="117" style="margin-bottom:3px;" /><br />'+'<font color="blue">操作方法：</font>'+_Ways+'');//給提示層里面添加內(nèi)容并傳入?yún)?shù) 
}).mouseout(function(){ 
$("#_gameinfo").hide();//鼠標(biāo)離開元素提示層隱藏 
}) 
}) 
</script> 