當鼠標移動到圖片上時跟隨鼠標顯示放大的圖片效果
更新時間：2013年06月06日 16:55:53 作者：
當鼠標移動到圖片上時，跟隨鼠標顯示放大顯示的圖片，具體效果情況截圖，另附送源碼，感興趣的朋友可以學習下哈
原始狀態(tài)：
鼠標經(jīng)過：
<!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>無標題文檔</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="javascript">
$(function(){
var offsetX=20-$("#imgtest").offset().left;
var offsetY=20-$("#imgtest").offset().top;
var size=1.2*$('#imgtest ul li img').width();
$("#imgtest ul li").mouseover(function(event) {
var $target=$(event.target);
if($target.is('img'))
{
$("<img id='tip' src='"+$target.attr("src")+"'>").css({
"height":size,
"width":size,
"top":event.pageX+offsetX,
"left":event.pageY+offsetY,
}).appendTo($("#imgtest"));
}
}).mouseout(function() {
$("#tip").remove();
}).mousemove(function(event) {
$("#tip").css(
{
"left":event.pageX+offsetX,
"top":event.pageY+offsetY
});
});
})
</script>
<style type="text/css">
img{ height:262px; width:400px; position:absolute; border:5px solid #FFF;}
#imgtest{ height:auto;width:840px; margin:0 auto; position:absolute; }
#imgtest ul{ position:relative;width:840px; height:auto; background:#00F;}
#imgtest ul li{ position:relative; height:276px; width:410px; list-style:none; float:left; margin:3px; border:1px solid #999;}
</style>
</head>
<body>
<div id="imgtest">
<ul>
<li><img src="img/photo1.jpg" /></li>
<li><img src="img/photo2.jpg" /></li>
<li><img src="img/photo3.jpg" /></li>
<li><img src="img/photo4.jpg" /></li>
</ul>
</div>
</body>
</html>
鼠標經(jīng)過：
復制代碼 代碼如下:
<!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>無標題文檔</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="javascript">
$(function(){
var offsetX=20-$("#imgtest").offset().left;
var offsetY=20-$("#imgtest").offset().top;
var size=1.2*$('#imgtest ul li img').width();
$("#imgtest ul li").mouseover(function(event) {
var $target=$(event.target);
if($target.is('img'))
{
$("<img id='tip' src='"+$target.attr("src")+"'>").css({
"height":size,
"width":size,
"top":event.pageX+offsetX,
"left":event.pageY+offsetY,
}).appendTo($("#imgtest"));
}
}).mouseout(function() {
$("#tip").remove();
}).mousemove(function(event) {
$("#tip").css(
{
"left":event.pageX+offsetX,
"top":event.pageY+offsetY
});
});
})
</script>
<style type="text/css">
img{ height:262px; width:400px; position:absolute; border:5px solid #FFF;}
#imgtest{ height:auto;width:840px; margin:0 auto; position:absolute; }
#imgtest ul{ position:relative;width:840px; height:auto; background:#00F;}
#imgtest ul li{ position:relative; height:276px; width:410px; list-style:none; float:left; margin:3px; border:1px solid #999;}
</style>
</head>
<body>
<div id="imgtest">
<ul>
<li><img src="img/photo1.jpg" /></li>
<li><img src="img/photo2.jpg" /></li>
<li><img src="img/photo3.jpg" /></li>
<li><img src="img/photo4.jpg" /></li>
</ul>
</div>
</body>
</html>
相關文章
自己動手實現(xiàn)jQuery Callbacks完整功能代碼詳解
最近大量的用到jQuery Callbacks 對象，jQuery庫中的$.ajax()和$.Deferred() 對象也是基于這個對象實現(xiàn)，下面我們也模擬實現(xiàn)jQuery Callbacks 對象的部分功能2013-11-11
這篇文章主要介紹了jQuery居中元素scrollleft計算方法,結合實例形式分析了jQuery獲取及計算頁面滾動元素的相關操作技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了jQuery實現(xiàn)的模擬彈出窗口功能,結合實例形式分析了jQuery彈出窗口的初始化、坐標、背景設置等相關操作技巧,需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單菜單欄導航效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了jQuery模擬黑客帝國矩陣效果的方法,實例分析了jQuery操作頁面元素實現(xiàn)動畫效果的技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了jquery實現(xiàn)網(wǎng)頁左側導航菜單欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了jQuery中DOM常見操作,結合實例形式總結分析了jQuery針對dom屬性操作、文檔操作等常用方法與操作技巧,需要的朋友可以參考下2019-08-08
從jQuery 1.4.3起， HTML 5 data- 屬性 將自動被引用到jQuery的數(shù)據(jù)對象中。也就是說雖然 data-* 是在html5 中的元素, 但是如果使用 jquery 1.4.3庫以上的.還是可以 在非HTML5的頁面或瀏覽器里, 仍然可以使用.data(obj)方法來操作"data-*" 數(shù)據(jù).2014-08-08
jQuery+ajax讀取json數(shù)據(jù)并按照價格排序示例
這篇文章主要介紹了jQuery+ajax讀取json數(shù)據(jù)并按照價格排序,涉及jQuery基于ajax動態(tài)獲取json文件數(shù)據(jù)并進行數(shù)據(jù)遍歷與排序的相關操作技巧,需要的朋友可以參考下2018-03-03
在實踐中還是遇到了很多的問題，注意在input的checkbox中，用普通的attr屬性來判斷是不可以的，因為checked的值是checked，因此做個筆記2013-11-11