這個效果最初源於小敏同志的一個想法剛開始做的時候只能實現彈出的圖片是固定的不能隨鼠標移動最後加以改善終於實現了比較理想的效果今天就把制作該效果的經驗與大家一同分享先看看最終效果演示
HTML結構部分
先編寫一個無序列表的結構a標簽中的img標簽用來存放小圖片a標簽添加一個rel屬性用來存放大圖片的路徑
復制代碼 代碼如下:
<UL id=gallery sizcache="
" sizset="
">
<LI sizcache="
" sizset="
"><A class="smallimage" href="
<LI sizcache="
" sizset="
"><A class="smallimage" href="
<LI sizcache="
" sizset="
"><A class="smallimage" href="
</LI></UL>
CSS樣式表部分
bigimage是用jQuery創建的一個p標簽的id用來存放大圖片設置其樣式為絕對定位並先隱藏給a標簽添加一個黑色的背景是為了給圖片變暗的效果做鋪墊就這樣一個簡單的相冊效果就做好了
復制代碼 代碼如下:
ul#gallery { list
style:none; width:
px; margin:
auto
px; padding
left:
px; border:
px solid #d
d
d
; background:#fff; overflow:hidden; }
ul#gallery li { width:
px; height:
px; float:left; margin:
px
px
px
; }
ul#gallery li a
smallimage { background:#
; /*添加一個黑色的背景為圖片變暗的效果做鋪墊*/ display:block; width:
px; height:
px; }
#bigimage { position:absolute; display:none; /*大圖片的父標簽設置相對定位並將顯示樣式設置為隱藏*/ }
#bigimage img { width:
px; height:
px; padding:
px; background:#fff; border:
px solid #e
e
e
; }
jQuery代碼部分
先 聲明個變量xy用來存放大圖片離鼠標的距離在body中追加一個id為bigimage的p標簽用來存放大圖片大圖片的路徑就包含在了a標簽的 rel屬性中當鼠標在小圖片懸停的時候將獲取到的鼠標在浏覽器中的坐標賦值給大圖片絕對定位的坐標並以淡入的效果顯示之後再給小圖片綁定一個 mousemove事件也就是當鼠標移動的時候大圖片就會跟著鼠標移動了看以下的代碼
復制代碼 代碼如下:
<script src="
<script type="text/javascript">
//<![CDATA[
$(function(){
var x =
;
var y =
;
$("a
smallimage")
hover(function(e){ //綁定一個鼠標懸停時事件
//新建一個p標簽來存放大圖片
this
rel就是獲取到a標簽的大圖片的路徑
然後追加到body中
$("body")
append(
<p id="bigimage"><img src="
+ this
rel +
" alt="" /></p>
);
//改變小圖片的透明度為
結合上面的CSS
看起來就象是圖片變暗了
$(this)
find(
img
)
stop()
fadeTo(
slow
);
//將鼠標的坐標和聲明的x
y做運算並賦值給大圖片絕對定位的坐標
然後以fadeIn的效果顯示
$("#bigimage")
css({top:(e
pageY
y ) +
px
left:(e
pageX + x ) +
px
})
fadeIn(
fast
);
}
function(){ //鼠標離開後
//將變暗的圖片復原
$(this)
find(
img
)
stop()
fadeTo(
slow
);
//移除新增的p標簽
$("#bigimage")
remove();
});
$("a
smallimage")
mousemove(function(e){ //綁定一個鼠標移動的事件
//將鼠標的坐標和聲明的x
y做運算並賦值給大圖片絕對定位的坐標
這樣大圖片就能跟隨圖片而移動了
$("#bigimage")
css({top:(e
pageY
y ) +
px
left:(e
pageX + x ) +
px
});
});
});
//]]>
</script>
到這一步效果已經差不多了但是正如藍秋楓同志提到的效果還並不完美如果彈出的大圖片超過了浏覽器的寬度就會出現滾動條這對於用戶體驗來說的確很不好趁周末有時間我又在原來的基礎上進行了修改
先 分析下思路默認情況下彈出的大圖片的位置始終是在當前鼠標指針的右側如果當前鼠標指針離浏覽器右側邊界的寬度小於彈出的大圖片的寬度時就會出現圖 片溢出浏覽器的現象那麼只要寫一個語句判斷當前鼠標指針離浏覽器右側的邊界的寬度是否小於大圖片的寬度然後再根據這個判斷來顯示
有了上面的思路就好辦了為了使代碼更簡潔提高復用性我新增了一個widthJudge函數用於判斷寬度
復制代碼 代碼如下:
function widthJudge(e){
//頁面的總寬度減去鼠標當前的X坐標得到右側邊界的寬度
var marginRight = document
documentElement
clientWidth
e
pageX;
//獲取彈出的大圖片的寬度
var imageWidth = $("#bigimage")
width();
//如果右側邊界的寬度小於彈出的大圖片的寬度
if(marginRight < imageWidth)
{
//重新計算變量x的值
x = imageWidth +
;
//此時大圖片的位置應該是當前鼠標指針的寬度減去新的x的值
$("#bigimage")
css({top:(e
pageY
y ) +
px
left:(e
pageX
x ) +
px
});
}else{ //否則
//仍將x定義為
這一步千萬不能省略
因為之前x的值已經改變
x =
;
//如果右側的寬度值夠顯示大圖片
將仍然按照原來的位置顯示
$("#bigimage")
css({top:(e
pageY
y ) +
px
left:(e
pageX + x ) +
px
});
};
}
最後再結合上面的代碼完整的jQuery代碼部分如下
復制代碼 代碼如下:
<script type="text/javascript">
//<![CDATA[
$(function(){
var x =
;
var y =
;
$("a
smallimage")
hover(function(e){
$("body")
append(
<p id="bigimage"><img src="
+ this
rel +
" alt="" /></p>
);
$(this)
find(
img
)
stop()
fadeTo(
slow
);
widthJudge(e); //調用寬度判斷函數
$("#bigimage")
fadeIn(
fast
);
}
function(){
$(this)
find(
img
)
stop()
fadeTo(
slow
);
$("#bigimage")
remove();
});
$("a
smallimage")
mousemove(function(e){
widthJudge(e); //調用寬度判斷函數
});
function widthJudge(e){
var marginRight = document
documentElement
clientWidth
e
pageX;
var imageWidth = $("#bigimage")
width();
if(marginRight < imageWidth)
{
x = imageWidth +
;
$("#bigimage")
css({top:(e
pageY
y ) +
px
left:(e
pageX
x ) +
px
});
}else{
x =
;
$("#bigimage")
css({top:(e
pageY
y ) +
px
left:(e
pageX + x ) +
px
});
};
}
});
//]]>
</script>
解決了圖片溢出浏覽器的問題這個效果還算不錯了如果你喜歡這個效果你可以下載源文件
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20168.html
