快捷導(dǎo)航

jquery預(yù)覽圖片實(shí)現(xiàn)鼠標(biāo)放上去顯示實(shí)際大小

更新時(shí)間：2014年01月16日 15:58:51 作者：

本文為大家介紹的這個(gè)示例為jquery實(shí)現(xiàn)的預(yù)覽圖片，當(dāng)鼠標(biāo)放上去顯示實(shí)際大小，感興趣的朋友可以學(xué)習(xí)下

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>jQuery圖片預(yù)覽-jQuery在線演示-jQuery學(xué)習(xí)</title> 
<link  rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<style type="text/css"> 
img 
{ 
border: none; 
} 


ul, li 
{ 
margin: 0; 
padding: 0; 
} 


li 
{ 
list-style: none; 
float: left; 
display: inline; 
margin-right: 10px; 
} 


#imglist img 
{ 
width: 150px; 
height: 120px; 
} 


#imgshow 
{ 
position: absolute; 
border: 1px solid #ccc; 
background: #333; 
padding: 5px; 
color: #fff; 
display: none; 
} 
</style> 
<script type="text/javascript"> 
var ShowImage = function () { 
xOffset = 10; 
yOffset = 30; 
$("#imglist").find("img").hover(function (e) { 
$("<img id='imgshow' src='" + this.src + "' />").appendTo("body"); 
//下面是兩種樣式賦值方法 
//$("#imgshow").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("slow"); 
$("#imgshow").css({"top":(e.pageY - xOffset) + "px","left":(e.pageX + yOffset) + "px"}).fadeIn("slow"); 
}, function () { 
$("#imgshow").remove(); 
}); 
}; 


jQuery(document).ready(function () { 
ShowImage(); 
}); 
</script> 


</head> 
<body> 
<div id="page-wrap"> 
<div id="content-wrap"> 
<div id="content-left" class="demo"> 
<ul id="imglist"> 
<li><a> 
<img src="http://g.hiphotos.baidu.com/image/w%3D2048/sign=0a53d9eca1cc7cd9fa2d33d90d39203f/35a85edf8db1cb13efa8fe12df54564e93584bea.jpg" alt="圖片" /></a></li> 
<li><a> 
<img src="http://a0.att.hudong.com/70/44/14300000029584127555444098375.jpg" alt="圖片" /></a></li> 
</ul> 
</div> 
</div> 


</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery前端分頁(yè)示例分享
這篇文章主要介紹了jQuery前端分頁(yè)示例分享的相關(guān)資料,需要的朋友可以參考下
2015-02-02
jQuery插件zepto.js簡(jiǎn)單實(shí)現(xiàn)tab切換
這篇文章主要介紹了jQuery插件zepto.js簡(jiǎn)單實(shí)現(xiàn)tab切換的代碼，十分的簡(jiǎn)潔，有需要的小伙伴可以參考下
2015-06-06
jQuery第三課修改元素屬性及內(nèi)容的代碼
上文介紹了如何篩選到需要的元素。得到了元素之后就要對(duì)其進(jìn)行操作。
2010-03-03
查看源碼的工具學(xué)習(xí)jQuery源碼不錯(cuò)的工具
jQuery是一個(gè)非常好用的javascript框架，我尤其喜歡它強(qiáng)大的選擇器和鏈?zhǔn)奖磉_(dá)式，使得我們能通過(guò)簡(jiǎn)單的語(yǔ)句實(shí)現(xiàn)復(fù)雜的功能。它還有一個(gè)重要的特點(diǎn)就是它的可擴(kuò)展性，使得很多人都可以開(kāi)發(fā)他們的插件并且分享出來(lái)
2011-12-12
JQuery之focus函數(shù)使用介紹
focus函數(shù)可以用來(lái)發(fā)生點(diǎn)擊某個(gè)按鈕或者提交值錯(cuò)誤等觸發(fā)事件發(fā)生時(shí)把焦點(diǎn)給到某個(gè)元素,具體用法如下，感興趣的朋友可以參考下
2013-08-08
基于jQuery實(shí)現(xiàn)點(diǎn)擊最后一行實(shí)現(xiàn)行自增效果的表格
現(xiàn)在任何事務(wù)都追求效率和人性化，當(dāng)然網(wǎng)頁(yè)效果也是如此，如果一個(gè)可以編輯數(shù)據(jù)的表格，編輯到最后一行的時(shí)候，點(diǎn)擊可以自動(dòng)添加一行，這樣算是一個(gè)比較人性化的效果，可以免去一絲勞頓之苦，下面分享一段這樣的代碼
2016-01-01
jQuery 遍歷map()方法詳解
大家都知道m(xù)ap()方法主要用來(lái)遍歷操作數(shù)組和對(duì)象，這篇文章將給大家詳細(xì)介紹關(guān)于jQuery遍歷map()方法的內(nèi)容，文章給出了詳細(xì)的示例代碼，對(duì)大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2016-11-11
jQuery實(shí)現(xiàn)文章收起與展開(kāi)功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)文章收起與展開(kāi)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
jQuery的$.extend 淺拷貝與深拷貝
這篇文章主要介紹了jQuery的$.extend 淺拷貝與深拷貝的相關(guān)資料,需要的朋友可以參考下
2017-03-03
詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹
這篇文章主要介紹了詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹 ,具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-01-01