jQuery實(shí)現(xiàn)圖片信息的浮動(dòng)顯示實(shí)例代碼
更新時(shí)間：2013年08月28日 09:04:15 作者：
圖片信息的浮動(dòng)顯示的效果，在網(wǎng)頁(yè)應(yīng)用中還是比較流行的，下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的，喜歡的朋友可以參考下
如圖：
<html>
<head>
<meta charset="utf-8"/>
<style>
li{list-style:none;float:left;margin-right:10px;border:1px solid #AAAAAA}
#tooltip{position:absolute;}
</style>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").hover(function(){
var title = this.title;
$("a.tooltip").attr("newTitle",this.title);
this.title = '';
var $div = $("<div id='newTip'><img src='"+this.href+"'/><br/>"+this.newTitle+"</div>");
$("body").append($div);
$div.css({"position":"absolute","background":"silver"}).show("fast");
},function(){
this.title = this.newTitle;
$("#newTip").remove();
}).mousemove(function(e){
var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'}).show("fast");
});
})
</script>
</head>
<body>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
</ul>
</body>
</html>
復(fù)制代碼 代碼如下:
<html>
<head>
<meta charset="utf-8"/>
<style>
li{list-style:none;float:left;margin-right:10px;border:1px solid #AAAAAA}
#tooltip{position:absolute;}
</style>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").hover(function(){
var title = this.title;
$("a.tooltip").attr("newTitle",this.title);
this.title = '';
var $div = $("<div id='newTip'><img src='"+this.href+"'/><br/>"+this.newTitle+"</div>");
$("body").append($div);
$div.css({"position":"absolute","background":"silver"}).show("fast");
},function(){
this.title = this.newTitle;
$("#newTip").remove();
}).mousemove(function(e){
var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'}).show("fast");
});
})
</script>
</head>
<body>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
</ul>
</body>
</html>
相關(guān)文章
基于jquery實(shí)現(xiàn)鼠標(biāo)左右拖動(dòng)滑塊滑動(dòng)附源碼下載
這篇文章主要介紹了基于jquery實(shí)現(xiàn)鼠標(biāo)左右拖動(dòng)滑塊滑動(dòng)附源碼下載 的相關(guān)資料,需要的朋友可以參考下2015-12-12
JavaScript 學(xué)習(xí)筆記之一jQuery寫(xiě)法圖片等比縮放以及預(yù)加載
以前對(duì)于JavaScript總是在用到的時(shí)候在頁(yè)面上寫(xiě)幾個(gè)函數(shù)，基本沒(méi)考慮到函數(shù)的封裝與重用，最近有個(gè)項(xiàng)目可能對(duì)于這方面要求有點(diǎn)高，所以就研究了下類似jQuery的封裝2012-06-06
結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項(xiàng)卡(jquery版和原生JS版)
日常項(xiàng)目中常用到的,用jQuery和原生JS分別寫(xiě)了一個(gè). 兩種寫(xiě)法均實(shí)現(xiàn)了結(jié)構(gòu)/表現(xiàn)/行為的完全分離.當(dāng)然,稍作修改,可以在同一個(gè)頁(yè)面中應(yīng)用于多個(gè)選項(xiàng)卡.2010-08-08
jQuery擴(kuò)展_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了jQuery擴(kuò)展，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Jquery動(dòng)態(tài)改變圖片IMG的src地址示例
改變圖片IMG的鏈接地址在某些特殊情況下實(shí)現(xiàn)特殊的功能還是比較不錯(cuò)的，下面為大家詳細(xì)介紹下使用jquery改變圖片IMG的鏈接地址，感興趣的朋友可以參考下哈2013-06-06
PHP+jQuery+Ajax實(shí)現(xiàn)多圖片上傳效果
我們?cè)诒疚闹杏玫揭粋€(gè)Ajax表單提交插件：jqery.form.js，有高人修改了幾行代碼并改名為：jquery.wallform.js，直接拿來(lái)用。下面我們就來(lái)看看這款神奇的jQuery插件吧。2015-03-03
小編收集了13個(gè)有用的CSS3,HTML5和jQuery搜索表單腳本來(lái)幫助大家從頭開(kāi)始創(chuàng)建一個(gè)搜索框。希望能夠幫助到大家，讓我們一起來(lái)看看吧！2014-12-12
本文給大家介紹如何給Carousel插件添加新的功能，非常方便以后的程序開(kāi)發(fā)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
jQuery 2.0.3 源碼分析之core（一）整體架構(gòu)
這篇文章主要介紹了jQuery 2.0.3 源碼分析之core（一）整體架構(gòu),需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01