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