DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery常見問題 >> jQuery動態提示消息框效果
jQuery動態提示消息框效果
編輯:JQuery常見問題     
效果體驗:http:///keleyi/phtml/jqtexiao/2.htm

HTML代碼:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery動態提示消息框效果 - </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" href="http:///keleyi/phtml/jqtexiao/2/stylesheets/jquery.tooltip/jquery.tooltip.css" type="text/css" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http:///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="詳細信息">
本網站的名稱:<br />
本網站的網址: <br />
本站提供jQuery特效,Javascript實例,ASP.NET源碼等內容資料,歡迎訪問!柯 樂 義
<br />工具:http://tool.
<br />搜索本站內容:http://so.
</div>
</div>

<div id="item_keleyi_com_2" class="item_keleyi_com">
jQuery
<div class="tooltip_description" style="display:none" title="jQuery介紹">
網址:http:///menu/jquery/
<br />網上有許多jQuery的特效和知識,歡迎訪問。
jQuery實現腳本與頁面的分離<br />
節省開發者學習時間<br />
讓JavaScript編程變得有趣<br /><br /><br />
更多信息請訪問:http://so./ <br />
搜索:jQuery的優勢與不足
</div>
</div>

<div id="item_keleyi_com_3" class="item_keleyi_com">
HTML5
<div class="tooltip_description" style="display:none" title="HTML5介紹">
HTML5的發展越來越邁向成熟,很多的應用已經逐漸出現在你我日常生活中了,不只讓傳統網站上的互動Flash逐漸的被HTML5的技術取代,更重要的是可以透過HTML5的技術來開發跨平台的手機軟件,讓許多開發者感到十分興奮!<br />
一般廣義而言的HTML5則包含了HTML、CSS和JavaScript三個部分,不單單只是HTML部分而已,CSS 3和JavaScript也有許多的創新,讓整個網頁程序功能更加缤紛。<br />

</div>
</div>

<div id="item_keleyi_com_4" class="item_keleyi_com">
Javascript
<div class="tooltip_description" style="display:none" title="Javascript介紹">
在javascript中,變量的作用域有全局(window對象)作用域和函數調用作用域。<br />
js獲取本機的外網/廣域網ip地址<br /><br /><br />
更多信息請訪問:http://so./ <br />
搜索:Javascript作用域<br />
js獲取本機的外網/廣域網ip地址<br />

</div>
</div>
<div style="clear:both;margin-top:130px;width:960px;">
<h3>jQuery動態提示消息框效果</h3>
<p>請把光標移動到四個矩形上。適用浏覽器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br />來源:<a href="http:///"></a> <a href="http:///a/bjac/hxv86dyi.htm">原文</a></p>
<ul>
<li><a href="http:///a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li>
<li><a href="http:///a/bjac/182di68b.htm">導航樣式</a></li>
<li><a href="http:///a/bjac/mt97p5y9.htm">側邊導航</a></li>
<li><a href="http:///dev/3068696139522ae4.htm">樹形菜單</a></li>
<li><a href="http:///a/bjac/ck9atu5j.htm">jquery ui 可折疊手風琴菜單</a></li><li><a href="http:///a/bjac/r55i6646.htm">jQuery :even 偶數選擇器</a></li><li><a href="http:///a/bjac/9rf4gedp.htm">展開、收起div的jQuery代碼</a></li><li><a href="http:///a/bjac/mnmpm4bv.htm">jQuery圖片走馬燈示例</a></li>
</ul>
</div>
</body>
</html>


參考:http:///a/bjac/a6d651710217f7a0.htm
點擊這裡下載
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved