jquery 簡短幾句代碼實(shí)現(xiàn)給元素動態(tài)添加及獲取提示信息
更新時間:2011年09月01日 20:30:08 作者:
雖然是很基本的東西,但為什么很基本的方法就可以實(shí)現(xiàn)的東西有些人偏偏還要去追求復(fù)雜高深難懂的呢?這里只是交流而已
還是要首先引用JQ框架。
然后來看看效果:(連接添加不上)只能暫時看哈圖片, 具體效果可參見我博客左方“My Box”中的“玩游戲”:
下面代碼中有具體注釋。
<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)點(diǎn)擊抓東西。" name="zhishangqiu">智商球3</a>
<a href="javascript:;" alt="鼠標(biāo)操作,移動鼠標(biāo)控制機(jī)械手移動,點(diǎn)擊左鍵釋放磁吸力抓住貨物。" name="yunshuchuan">船長的運(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;};//檢測是否為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>
然后來看看效果:(連接添加不上)只能暫時看哈圖片, 具體效果可參見我博客左方“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)點(diǎn)擊抓東西。" name="zhishangqiu">智商球3</a>
<a href="javascript:;" alt="鼠標(biāo)操作,移動鼠標(biāo)控制機(jī)械手移動,點(diǎn)擊左鍵釋放磁吸力抓住貨物。" name="yunshuchuan">船長的運(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;};//檢測是否為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>
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)的簡單提示信息插件
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點(diǎn)效果
- jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過提示信息的地圖熱點(diǎn)效果
- jquery 提示信息顯示后自動消失的具體實(shí)現(xiàn)
- qTip2 精致的基于jQuery提示信息插件
- 基于JQuery的浮動DIV顯示提示信息并自動隱藏
- JQuery浮動DIV提示信息并自動隱藏的代碼
- 基于jQuery的彈出警告對話框美化插件(警告,確認(rèn)和提示)
- 基于jquery的氣泡提示效果
- jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個性化錯誤提示
- jquery刪除提示框彈出是否刪除對話框
- Jquery實(shí)現(xiàn)搜索框提示功能示例代碼
- jQuery封裝的屏幕居中提示信息代碼
相關(guān)文章
Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例
這篇文章主要介紹了Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例,需要的朋友可以參考下2015-12-12
通過XMLHttpRequest和jQuery實(shí)現(xiàn)ajax的幾種方式
AJAX大家已經(jīng)都知道了,是為了實(shí)現(xiàn)異步通訊,提高用戶體驗(yàn)度,而將很多舊知識(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一個新的知識框架。而,XMLHttpRequest對象則是其中的重重之中,本篇文章主要給大家介紹通過XMLHttpRequest和jQuery實(shí)現(xiàn)ajax的幾種方式2015-08-08
jQuery實(shí)現(xiàn)顏色打字機(jī)的完整代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)顏色打字機(jī)的完整代碼,代碼簡單易懂,非常不錯,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
jquery之empty()與remove()區(qū)別說明
要用到移除指定元素的時候,發(fā)現(xiàn)empty()與remove([expr])都可以用來實(shí)現(xiàn)。可仔細(xì)觀察效果的話就可以發(fā)現(xiàn)。2010-09-09
jQuery實(shí)現(xiàn)對網(wǎng)頁節(jié)點(diǎn)的增刪改查功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)對網(wǎng)頁節(jié)點(diǎn)的增刪改查功能,涉及jQuery針對網(wǎng)頁DOM節(jié)點(diǎn)的獲取、屬性修改等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
JQuery遍歷元素的后代和同胞實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫Query遍歷元素的后代和同胞實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
jquery validate表單驗(yàn)證的基本用法入門
這篇文章主要為大家介紹了jquery validate表單驗(yàn)證的基本用法入門,jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能,讓客戶端表單驗(yàn)證變得更簡單,同時提供了大量的定制選項(xiàng),滿足應(yīng)用程序各種需求,感興趣的小伙伴們可以參考一下2016-01-01

