快捷導(dǎo)航

鋒利的jQuery 第三章章節(jié)總結(jié)的例子

更新時間：2010年03月23日 13:48:50 作者：

改寫《鋒利的jQuery》第三章章節(jié)總結(jié)的例子

<style> 
li{ float:left; list-style:none; padding:3px;} 
img{ border:#CCC 1px solid;} 
#tooltip{ display:none; border:#CCC 1px solid; position:absolute;} 
.img1{ display:block;} 
.div1{ padding:0px; margin:0px; background:#111; color:FFF; font-family:微軟雅黑;} 
</style> 
<ul> 
<li><a href="images/apple_1_bigger.jpg" class="tooltip"><img src="images/apple_1.jpg" /></a></li> 
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="第二個產(chǎn)品"><img src="images/apple_2.jpg" /></a></li> 
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="第三個產(chǎn)品"><img src="images/apple_3.jpg" /></a></li> 
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="第四個產(chǎn)品"><img src="images/apple_4.jpg" /></a></li> 
</ul> 
<script> 
var x = 10; 
var y = 10; 
$("a.tooltip").mouseover(function (e) { 
this.myTitle = this.title; 
this.title = ""; 
this.imgTitle = this.myTitle ? this.myTitle : "無title"; 
var tooltip = "<div id='tooltip'><img class='img1' src='" + this.href + "'/><div class='div1'>" + this.imgTitle + "</div></div>" 
$("body").append(tooltip); 
$("#tooltip").css({ 
"top": +(e.pageY + y) + "px", 
"left": +(e.pageX + x) + "px" 
}).show("fast"); 
}).mouseout(function () { 
$("#tooltip").remove(); 
this.title = this.myTitle; 
}) 
</script>

相關(guān)文章

jQuery實(shí)現(xiàn)簡單的手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單的手風(fēng)琴效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
jquery的ajax如何使用ajaxSetup做全局請求攔截
在Web開發(fā)中,Ajax是一種常用的前后端數(shù)據(jù)交互技術(shù),由于業(yè)務(wù)需求的復(fù)雜性和安全性的考慮,我們可能需要對Ajax請求進(jìn)行全局?jǐn)r截和處理,以便統(tǒng)一處理一些共性問題,如權(quán)限驗(yàn)證、錯誤處理等,本項(xiàng)目方案將介紹如何使用jQuery的Ajax實(shí)現(xiàn)全局請求攔截
2023-11-11
jquery實(shí)現(xiàn)搜索框功能實(shí)例詳解
這篇文章主要介紹了jquery實(shí)現(xiàn)搜索框功能,搜索框?qū)崿F(xiàn)搜索一個ul列表中的指定關(guān)鍵詞的li。具體實(shí)現(xiàn)代碼大家參考下本文
2018-07-07
使用jquery實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了使用jquery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
JQuery之proxy實(shí)現(xiàn)綁定代理方法
下面小編就為大家?guī)硪黄狫Query之proxy實(shí)現(xiàn)綁定代理方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
jQuery實(shí)現(xiàn)動態(tài)添加和刪除input框代碼實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動態(tài)添加和刪除input框，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
jQuery實(shí)現(xiàn)的兼容性浮動層示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的兼容性浮動層,可兼容IE、火狐等主流瀏覽器,涉及jQuery針對頁面元素的運(yùn)算與屬性的動態(tài)設(shè)置相關(guān)技巧,需要的朋友可以參考下
2016-08-08
jquery中的查找parents與closest方法之間的區(qū)別
這篇文章主要是對jquery中的查找parents與closest方法之間的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jQuery 限制輸入字符串長度
這篇文章主要介紹了jQuery限制輸入字符串長度的方法，實(shí)例講解，非常實(shí)用,需要的朋友可以參考下。
2016-06-06
jtable列中自定義button示例代碼
本文將為大家介紹下在jtable列中如何自定義button，下面有一個不錯的示例，感興趣的朋友可以參考下
2013-11-11