鋒利的jQuery 第三章章節(jié)總結(jié)的例子
更新時(shí)間：2010年03月23日 13:48:50 作者：
改寫(xiě)《鋒利的jQuery》第三章章節(jié)總結(jié)的例子
復(fù)制代碼 代碼如下:
<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="第二個(gè)產(chǎn)品"><img src="images/apple_2.jpg" /></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="第三個(gè)產(chǎn)品"><img src="images/apple_3.jpg" /></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="第四個(gè)產(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 : "無(wú)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簡(jiǎn)易時(shí)光軸實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery簡(jiǎn)易時(shí)光軸實(shí)現(xiàn)方法,可實(shí)現(xiàn)點(diǎn)擊底部鏈接動(dòng)態(tài)加載內(nèi)容的功能,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
jQuery實(shí)現(xiàn)的兩種簡(jiǎn)單彈窗效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的兩種簡(jiǎn)單彈窗效果,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)淡入彈窗及滑動(dòng)彈窗的相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
jQuery對(duì)html元素的取值與賦值實(shí)例詳解
這篇文章主要介紹了jQuery對(duì)html元素的取值與賦值,較為詳細(xì)的分析了jQuery針對(duì)常見(jiàn)html元素的獲取與賦值技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-12-12
使用jQuery實(shí)現(xiàn)WordPress中的Ctrl+Enter和@評(píng)論回復(fù)
相信大家對(duì)QQ中的Ctrl+Enter快捷回復(fù)和微博上的@指名回復(fù)功能都不陌生,在WordPress的評(píng)論欄方面我們同樣可以添加這樣的功能,一起來(lái)看使用jQuery實(shí)現(xiàn)WordPress中的Ctrl+Enter和@評(píng)論回復(fù)的方法:2016-05-05
這篇文章主要介紹了jquery插件Jplayer使用方法簡(jiǎn)析，具有實(shí)用價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
討論jQuery和javascript性能的文章并不罕見(jiàn)。然而，本文我計(jì)劃總結(jié)一些速度方面的技巧和我本人的一些建議，來(lái)提升你的jQuery和javascript代碼。好的代碼會(huì)帶來(lái)速度的提升?？焖黉秩竞晚憫?yīng)意味著更好的用戶體驗(yàn)2014-03-03
編寫(xiě)插件的目的是給已經(jīng)有的一系列方法或函數(shù)做一個(gè)封裝，以便在其他地方重復(fù)使用，提高開(kāi)發(fā)效率和方便后期維護(hù)。本文將詳細(xì)介紹如何編寫(xiě)jQuery插件2017-03-03
jQuery與vue實(shí)現(xiàn)拖動(dòng)驗(yàn)證碼功能
本篇文章主要給大家分享jQuery與vue分別實(shí)現(xiàn)超級(jí)簡(jiǎn)單的綠色拖動(dòng)驗(yàn)證碼功能以及代碼實(shí)例，需要的朋友學(xué)習(xí)下吧。2018-01-01
jquery通過(guò)a標(biāo)簽刪除table中的一行的代碼
刪除table中的一行的方法有很多，在本文為大家介紹下jquery是如何做到的，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下2013-12-12
jQuery使用之標(biāo)記元素屬性用法實(shí)例
這篇文章主要介紹了jQuery使用之標(biāo)記元素屬性用法,實(shí)例分析了jQuery如何控制頁(yè)面,包含元素的屬性、css樣式風(fēng)格、DOM模型、表單元素和事件處理等使用技巧,需要的朋友可以參考下2015-01-01