jQuery實(shí)現(xiàn)鼠標(biāo)移到元素上動(dòng)態(tài)提示消息框效果-創(chuàng)新互聯(lián)

當(dāng)光標(biāo)移動(dòng)到某些元素上時(shí)，會(huì)彈出像tips的提示框，這種效果想必大家都有見(jiàn)到過(guò)吧，下面有個(gè)不錯(cuò)的示例，大家可以感受下
當(dāng)光標(biāo)移動(dòng)到某些元素上時(shí)，會(huì)彈出像tips的提示框。
代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery動(dòng)態(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">
柯樂(lè)義
<div class="tooltip_description" title="柯樂(lè)義詳細(xì)信息">
本網(wǎng)站的名稱(chēng)：柯樂(lè)義<br />
本網(wǎng)站的網(wǎng)址： keleyi.com <br />
本站提供jQuery特效,Javascript實(shí)例，ASP.NET源碼等內(nèi)容資料，歡迎訪問(wèn)！柯 樂(lè) 義
<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" title="jQuery介紹">
網(wǎng)址：http://keleyi.com/menu/jquery/
<br />柯樂(lè)義網(wǎng)上有許多jQuery的特效和知識(shí)，歡迎訪問(wèn)。
jQuery實(shí)現(xiàn)腳本與頁(yè)面的分離<br />
節(jié)省開(kāi)發(fā)者學(xué)習(xí)時(shí)間<br />
讓JavaScript編程變得有趣<br /><br /><br />
更多信息請(qǐng)?jiān)L問(wèn)：http://so.keleyi.com/ <br />
搜索：jQuery的優(yōu)勢(shì)與不足
</div>
</div>

<div id="item_keleyi_com_3" class="item_keleyi_com">
HTML5
<div class="tooltip_description" title="HTML5介紹">
HTML5的發(fā)展越來(lái)越邁向成熟，很多的應(yīng)用已經(jīng)逐漸出現(xiàn)在你我日常生活中了，不只讓傳統(tǒng)網(wǎng)站上的互動(dòng)Flash逐漸的被HTML5的技術(shù)取代，更重要的是可以透過(guò)HTML5的技術(shù)來(lái)開(kāi)發(fā)跨平臺(tái)的手機(jī)軟件，讓許多開(kāi)發(fā)者感到十分興奮！<br />
一般廣義而言的HTML5則包含了HTML、CSS和JavaScript三個(gè)部分，不單單只是HTML部分而已，CSS 3和JavaScript也有許多的創(chuàng)新，讓整個(gè)網(wǎng)頁(yè)程序功能更加繽紛。<br />
keleyi.com
</div>
</div>

<div id="item_keleyi_com_4" class="item_keleyi_com">
Javascript
<div class="tooltip_description" title="Javascript介紹">
在javascript中，變量的作用域有全局（window對(duì)象）作用域和函數(shù)調(diào)用作用域。<br />
js獲取本機(jī)的外網(wǎng)/廣域網(wǎng)ip地址<br /><br /><br />
更多信息請(qǐng)?jiān)L問(wèn)：http://so.keleyi.com/ <br />
搜索：Javascript作用域<br />
js獲取本機(jī)的外網(wǎng)/廣域網(wǎng)ip地址<br />
unity3d教程 http://www.unitymanual.com</div>
</div>
<div >
<h4>jQuery動(dòng)態(tài)提示消息框效果</h4>
<p>請(qǐng)把光標(biāo)移動(dòng)到四個(gè)矩形上。適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br />來(lái)源：<a >柯樂(lè)義</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 >樹(shù)形菜單</a></li>
<li><a >jquery ui 可折疊手風(fēng)琴菜單</a></li><li><a >jQuery :even 偶數(shù)選擇器</a></li><li><a >展開(kāi)、收起div的jQuery代碼</a></li><li><a >jQuery圖片走馬燈示例</a></li>
</ul>
</div>
</body>
</html>

創(chuàng)新互聯(lián)是工信部頒發(fā)資質(zhì)IDC服務(wù)器商，為用戶提供優(yōu)質(zhì)的成都服務(wù)器托管服務(wù)

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：jQuery實(shí)現(xiàn)鼠標(biāo)移到元素上動(dòng)態(tài)提示消息框效果-創(chuàng)新互聯(lián)
新聞來(lái)源：http://bm7419.com/article30/gehso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、Google、ChatGPT、網(wǎng)頁(yè)設(shè)計(jì)公司、靜態(tài)網(wǎng)站、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁(yè)設(shè)計(jì)公司