jQuery實(shí)現(xiàn)鼠標(biāo)移到元素上動態(tài)提示消息框效果
更新時(shí)間:2013年10月20日 11:31:24 作者:
當(dāng)光標(biāo)移動到某些元素上時(shí),會彈出像tips的提示框,這種效果想必大家都有見到過吧,下面有個(gè)不錯的示例,大家可以感受下
當(dāng)光標(biāo)移動到某些元素上時(shí),會彈出像tips的提示框。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery動態(tài)提示消息框效果</title><base target="_blank" />
<style type="text/css">
* { font-family: monaco; }
div.item_keleyi_com { width:100px; height:50px; background-color: maroon; text-align:center; padding-top:25px; }
div#item_keleyi_com_1 { position: absolute; top: 50px; left: 50px;color: white; }
div#item_keleyi_com_2 { position: absolute; top: 500px; left: 0px;color: white; }
div#item_keleyi_com_3 { position: absolute; top: 0px; left: 500px;color: white; }
div#item_keleyi_com_4 { position: absolute; top: 500px; left: 500px; color: white;}
ul{ list-style:none;padding:0px 0px 0px 10px;}a{color:Blue;}
</style>
<link rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/2/javascripts/jquery.tooltip.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function(){
$j("div.item_kel"+"eyi_com").tooltip();
});
</script>
</head>
<body>
<div id="item_keleyi_com_1" class="item_keleyi_com">
柯樂義
<div class="tooltip_description" style="display:none" title="柯樂義詳細(xì)信息">
本網(wǎng)站的名稱:柯樂義<br />
本網(wǎng)站的網(wǎng)址: keleyi.com <br />
本站提供jQuery特效,Javascript實(shí)例,ASP.NET源碼等內(nèi)容資料,歡迎訪問!柯 樂 義
<br />工具:http://tool.keleyi.com
<br />搜索本站內(nèi)容:http://so.keleyi.com
</div>
</div>
<div id="item_keleyi_com_2" class="item_keleyi_com">
jQuery
<div class="tooltip_description" style="display:none" title="jQuery介紹">
網(wǎng)址:http://keleyi.com/menu/jquery/
<br />柯樂義網(wǎng)上有許多jQuery的特效和知識,歡迎訪問。
jQuery實(shí)現(xiàn)腳本與頁面的分離<br />
節(jié)省開發(fā)者學(xué)習(xí)時(shí)間<br />
讓JavaScript編程變得有趣<br /><br /><br />
更多信息請?jiān)L問:http://so.keleyi.com/ <br />
搜索:jQuery的優(yōu)勢與不足
</div>
</div>
<div id="item_keleyi_com_3" class="item_keleyi_com">
HTML5
<div class="tooltip_description" style="display:none" title="HTML5介紹">
HTML5的發(fā)展越來越邁向成熟,很多的應(yīng)用已經(jīng)逐漸出現(xiàn)在你我日常生活中了,不只讓傳統(tǒng)網(wǎng)站上的互動Flash逐漸的被HTML5的技術(shù)取代,更重要的是可以透過HTML5的技術(shù)來開發(fā)跨平臺的手機(jī)軟件,讓許多開發(fā)者感到十分興奮!<br />
一般廣義而言的HTML5則包含了HTML、CSS和JavaScript三個(gè)部分,不單單只是HTML部分而已,CSS 3和JavaScript也有許多的創(chuàng)新,讓整個(gè)網(wǎng)頁程序功能更加繽紛。<br />
keleyi.com
</div>
</div>
<div id="item_keleyi_com_4" class="item_keleyi_com">
Javascript
<div class="tooltip_description" style="display:none" title="Javascript介紹">
在javascript中,變量的作用域有全局(window對象)作用域和函數(shù)調(diào)用作用域。<br />
js獲取本機(jī)的外網(wǎng)/廣域網(wǎng)ip地址<br /><br /><br />
更多信息請?jiān)L問:http://so.keleyi.com/ <br />
搜索:Javascript作用域<br />
js獲取本機(jī)的外網(wǎng)/廣域網(wǎng)ip地址<br />
</div>
</div>
<div style="clear:both;margin-top:130px;width:960px;">
<h3>jQuery動態(tài)提示消息框效果</h3>
<p>請把光標(biāo)移動到四個(gè)矩形上。適用瀏覽器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br />來源:<a >柯樂義</a> <a >原文</a></p>
<ul>
<li><a >jQuery AJAX</a></li>
<li><a >導(dǎo)航樣式</a></li>
<li><a >側(cè)邊導(dǎo)航</a></li>
<li><a >樹形菜單</a></li>
<li><a >jquery ui 可折疊手風(fēng)琴菜單</a></li><li><a >jQuery :even 偶數(shù)選擇器</a></li><li><a >展開、收起div的jQuery代碼</a></li><li><a >jQuery圖片走馬燈示例</a></li>
</ul>
</div>
</body>
</html>
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery動態(tài)提示消息框效果</title><base target="_blank" />
<style type="text/css">
* { font-family: monaco; }
div.item_keleyi_com { width:100px; height:50px; background-color: maroon; text-align:center; padding-top:25px; }
div#item_keleyi_com_1 { position: absolute; top: 50px; left: 50px;color: white; }
div#item_keleyi_com_2 { position: absolute; top: 500px; left: 0px;color: white; }
div#item_keleyi_com_3 { position: absolute; top: 0px; left: 500px;color: white; }
div#item_keleyi_com_4 { position: absolute; top: 500px; left: 500px; color: white;}
ul{ list-style:none;padding:0px 0px 0px 10px;}a{color:Blue;}
</style>
<link rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/2/javascripts/jquery.tooltip.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function(){
$j("div.item_kel"+"eyi_com").tooltip();
});
</script>
</head>
<body>
<div id="item_keleyi_com_1" class="item_keleyi_com">
柯樂義
<div class="tooltip_description" style="display:none" title="柯樂義詳細(xì)信息">
本網(wǎng)站的名稱:柯樂義<br />
本網(wǎng)站的網(wǎng)址: keleyi.com <br />
本站提供jQuery特效,Javascript實(shí)例,ASP.NET源碼等內(nèi)容資料,歡迎訪問!柯 樂 義
<br />工具:http://tool.keleyi.com
<br />搜索本站內(nèi)容:http://so.keleyi.com
</div>
</div>
<div id="item_keleyi_com_2" class="item_keleyi_com">
jQuery
<div class="tooltip_description" style="display:none" title="jQuery介紹">
網(wǎng)址:http://keleyi.com/menu/jquery/
<br />柯樂義網(wǎng)上有許多jQuery的特效和知識,歡迎訪問。
jQuery實(shí)現(xiàn)腳本與頁面的分離<br />
節(jié)省開發(fā)者學(xué)習(xí)時(shí)間<br />
讓JavaScript編程變得有趣<br /><br /><br />
更多信息請?jiān)L問:http://so.keleyi.com/ <br />
搜索:jQuery的優(yōu)勢與不足
</div>
</div>
<div id="item_keleyi_com_3" class="item_keleyi_com">
HTML5
<div class="tooltip_description" style="display:none" title="HTML5介紹">
HTML5的發(fā)展越來越邁向成熟,很多的應(yīng)用已經(jīng)逐漸出現(xiàn)在你我日常生活中了,不只讓傳統(tǒng)網(wǎng)站上的互動Flash逐漸的被HTML5的技術(shù)取代,更重要的是可以透過HTML5的技術(shù)來開發(fā)跨平臺的手機(jī)軟件,讓許多開發(fā)者感到十分興奮!<br />
一般廣義而言的HTML5則包含了HTML、CSS和JavaScript三個(gè)部分,不單單只是HTML部分而已,CSS 3和JavaScript也有許多的創(chuàng)新,讓整個(gè)網(wǎng)頁程序功能更加繽紛。<br />
keleyi.com
</div>
</div>
<div id="item_keleyi_com_4" class="item_keleyi_com">
Javascript
<div class="tooltip_description" style="display:none" title="Javascript介紹">
在javascript中,變量的作用域有全局(window對象)作用域和函數(shù)調(diào)用作用域。<br />
js獲取本機(jī)的外網(wǎng)/廣域網(wǎng)ip地址<br /><br /><br />
更多信息請?jiān)L問:http://so.keleyi.com/ <br />
搜索:Javascript作用域<br />
js獲取本機(jī)的外網(wǎng)/廣域網(wǎng)ip地址<br />
</div>
</div>
<div style="clear:both;margin-top:130px;width:960px;">
<h3>jQuery動態(tài)提示消息框效果</h3>
<p>請把光標(biāo)移動到四個(gè)矩形上。適用瀏覽器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br />來源:<a >柯樂義</a> <a >原文</a></p>
<ul>
<li><a >jQuery AJAX</a></li>
<li><a >導(dǎo)航樣式</a></li>
<li><a >側(cè)邊導(dǎo)航</a></li>
<li><a >樹形菜單</a></li>
<li><a >jquery ui 可折疊手風(fēng)琴菜單</a></li><li><a >jQuery :even 偶數(shù)選擇器</a></li><li><a >展開、收起div的jQuery代碼</a></li><li><a >jQuery圖片走馬燈示例</a></li>
</ul>
</div>
</body>
</html>
您可能感興趣的文章:
- JQuery的Alert消息框插件使用介紹
- 基于jQuery的message插件實(shí)現(xiàn)右下角彈出消息框
- jquery插件jquery.confirm彈出確認(rèn)消息
- 基于JQuery 的消息提示框效果代碼
- jquery判斷瀏覽器后退時(shí)候彈出消息的方法
- 使用ASP.NET MVC 4 Async Action+jQuery實(shí)現(xiàn)消息通知機(jī)制的實(shí)現(xiàn)代碼
- Notify - 基于jquery的消息通知插件
- 基于jQuery的彈出消息插件 DivAlert之旅(一)
- 讓新消息在網(wǎng)頁標(biāo)題閃爍提示的jQuery代碼
- jquery自定義顯示消息數(shù)量
相關(guān)文章
jquery+ajax每秒向后臺發(fā)送請求數(shù)據(jù)然后返回頁面的代碼
jquery+ajax每秒向后臺發(fā)送請求數(shù)據(jù)然后返回頁面(包括jquery頁面加載完畢才執(zhí)行方法)2011-01-01jQuery可見性過濾器:hidden和:visibility用法實(shí)例
這篇文章主要介紹了jQuery可見性過濾器:hidden和:visibility用法,實(shí)例分析了:hidden和:visibility的功能及相關(guān)使用技巧,需要的朋友可以參考下2015-06-06全面解析jQuery中的$(window)與$(document)的用法區(qū)別
這篇文章主要介紹了jQuery中的$(window)與$(document)的用法區(qū)別,具體內(nèi)容大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08jquery插件EasyUI中form表單提交實(shí)例分享
這篇文章主要介紹了jquery插件EasyUI中form表單提交實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01jQuery插件form-validation-engine正則表達(dá)式操作示例
這篇文章主要介紹了jQuery插件form-validation-engine正則表達(dá)式操作,結(jié)合實(shí)例形式分析了jQuery插件form-validation-engine進(jìn)行正則驗(yàn)證操作的相關(guān)技巧,需要的朋友可以參考下2017-02-02