當滑鼠移動到圖片上時跟隨滑鼠顯示放大的圖片效果_jquery

原始狀態：
 
鼠標經過：
 

複製代碼 代碼如下：

>



$(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'))
{
$("").css({
"高度" :尺寸,
"寬度":尺寸,
"頂部":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
})
})
;

img{ 高度:262px;寬度：400px；位置：絕對；邊框：5px實心#FFF;}
#imgtest{ 高度：自動；寬度：840px；保證金：0 自動；位置：絕對； }
#imgtest ul{ 位置：相對；寬度：840px；高度：自動；背景：#00F;}
#imgtest ul li{位置：相對;高度：276 像素；寬度：410px；列表樣式：無；浮動：左；邊距：3px；邊框：1px 實心#999;}
;
頭>

;

• 


• 


• 


• 
  

身體>