jQuery實(shí)現(xiàn)圖片信息的浮動(dòng)顯示實(shí)例代碼
更新時(shí)間：2013年08月28日 09:04:15 作者：
圖片信息的浮動(dòng)顯示的效果，在網(wǎng)頁應(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)文章
一個(gè)簡(jiǎn)單的jQuery計(jì)算器實(shí)現(xiàn)了連續(xù)計(jì)算功能
這篇文章主要介紹了一個(gè)簡(jiǎn)單的jQuery計(jì)算器主要實(shí)現(xiàn)了連續(xù)計(jì)算功能,需要的朋友可以參考下2014-07-07
jQuery實(shí)現(xiàn)頁面倒計(jì)時(shí)并刷新效果
頁面倒計(jì)時(shí)小編在很多網(wǎng)站都有這樣的需求，今天小編給大家分享一段jq代碼實(shí)現(xiàn)頁面倒計(jì)時(shí)并刷新效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，需要的的朋友參考下2017-03-03
jQuery簡(jiǎn)單實(shí)現(xiàn)兩級(jí)下拉菜單效果代碼
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)兩級(jí)下拉菜單效果代碼,基于jQuery遍歷簡(jiǎn)單實(shí)現(xiàn)菜單效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
jQuery圖片左右滾動(dòng)代碼 有左右按鈕實(shí)例
這篇文章主要介紹使用jQuery實(shí)現(xiàn)圖片左右滾動(dòng)的實(shí)例，需要的朋友可以參考下。2016-06-06
這篇文章主要介紹了Jquery easyUI 更新行、更新指定的行,需要的朋友可以參考下2014-03-03
jquery中的$(document).ready()與window.onload的區(qū)別
瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構(gòu)建完DOM樹之后, 也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后.2009-11-11
比較常用的限制字符輸入數(shù)功能(比如熱火超天的微博輸入框),用jQuery和原生JavaScript分別寫了一個(gè).原生JavaScript注釋中有區(qū)分中英文字符的函數(shù), 但個(gè)人并不建議這么做.2010-09-09
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)拖動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
jQuery 浮動(dòng)導(dǎo)航菜單適合購(gòu)物商品類型的網(wǎng)站
頁面長(zhǎng)度較大，需要方便快速的在頁面的不同位置進(jìn)行定位，所以浮動(dòng)菜單逐漸流行了起來，下面是jQuery浮動(dòng)導(dǎo)航菜單適合購(gòu)物網(wǎng)站商品類型2014-09-09
jQuery 判斷元素是否存在然后按需加載內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery 判斷元素是否存在然后按需加載內(nèi)容的實(shí)現(xiàn)代碼,需要的朋友可以參考下2020-01-01