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

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

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

還是要首先引用JQ框架。

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

下面代碼中有具體注釋。

再來(lái)看看代碼：

 
<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鍵控制小女孩移動(dòng)，方向鍵控制小男孩的移動(dòng)，不同顏色的陷阱只能容納不同顏色的人通過(guò)哦！" name="binghuoren">深林冰火人</a> 
<a href="javascript:;" alt="鼠標(biāo)點(diǎn)擊抓東西。" name="zhishangqiu">智商球3</a> 
<a href="javascript:;" alt="鼠標(biāo)操作，移動(dòng)鼠標(biāo)控制機(jī)械手移動(dòng)，點(diǎn)擊左鍵釋放磁吸力抓住貨物。" name="yunshuchuan">船長(zhǎng)的運(yùn)輸船</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;};//檢測(cè)是否為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)離開(kāi)元素提示層隱藏 
}) 
}) 
</script> 

您可能感興趣的文章:

動(dòng)態(tài)添加

相關(guān)文章

jQuery中的jQuery()方法用法分析
這篇文章主要介紹了jQuery中的jQuery()方法用法,以實(shí)例形式較為詳細(xì)的分析jQuery()方法的四種常見(jiàn)語(yǔ)法結(jié)構(gòu)與用法技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例
這篇文章主要介紹了Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例，需要的朋友可以參考下
2015-12-12
淺談jquery上下滑動(dòng)的注意事項(xiàng)
下面小編就為大家?guī)?lái)一篇jquery上下滑動(dòng)的注意事項(xiàng)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
通過(guò)XMLHttpRequest和jQuery實(shí)現(xiàn)ajax的幾種方式
AJAX大家已經(jīng)都知道了，是為了實(shí)現(xiàn)異步通訊，提高用戶體驗(yàn)度，而將很多舊知識(shí)（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一個(gè)新的知識(shí)框架。而，XMLHttpRequest對(duì)象則是其中的重重之中,本篇文章主要給大家介紹通過(guò)XMLHttpRequest和jQuery實(shí)現(xiàn)ajax的幾種方式
2015-08-08
jQuery實(shí)現(xiàn)顏色打字機(jī)的完整代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)顏色打字機(jī)的完整代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-03-03
jquery之empty()與remove()區(qū)別說(shuō)明
要用到移除指定元素的時(shí)候，發(fā)現(xiàn)empty()與remove([expr])都可以用來(lái)實(shí)現(xiàn)?？勺屑?xì)觀察效果的話就可以發(fā)現(xiàn)。
2010-09-09
jQuery實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查功能,涉及jQuery針對(duì)網(wǎng)頁(yè)DOM節(jié)點(diǎn)的獲取、屬性修改等相關(guān)操作技巧,需要的朋友可以參考下
2017-09-09
BootStrap 可編輯表Table格
這篇文章主要介紹了BootStrap 可編輯表格的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
JQuery遍歷元素的后代和同胞實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JQuery遍歷元素的后代和同胞實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
jquery validate表單驗(yàn)證的基本用法入門(mén)
這篇文章主要為大家介紹了jquery validate表單驗(yàn)證的基本用法入門(mén)，jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求，感興趣的小伙伴們可以參考一下
2016-01-01