本文實例講述了jquery實現(xiàn)鼠標(biāo)滑過小圖查看大圖的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

1. CSS部分：

ul{

list-style:none;

}

li{

float:left;

margin-left:10px;

}

img{

border:#CCCCCC solid 1px;

}

#max{

position:absolute;

display:none; /*隱藏層*/

}

2. HTML部分：

蘋果產(chǎn)品列表：

3. javascript部分：

$(document).ready(function(){

//e 事件對象，可以通過該事件對象獲取事件的參數(shù) e.pageX - X軸，距瀏覽器的左邊的距離 e.pageY - y軸，距瀏覽器的頂端的距離

$("a").mouseover(function(e){

//鼠標(biāo)移上去 向body追加大圖元素

//大圖的路徑：當(dāng)前連接的href屬性值為大圖的路徑

var $imgSrc = $(this).attr("href");

var $maxImg ="

";

//在body中添加元素

$("body").append($maxImg);

//設(shè)置層的top和left坐標(biāo)，并動畫顯示層

$("#max").css("top", e.pageY+20).css("left",e.pageX+10).show('slow');

}).mouseout(function(){

//鼠標(biāo)移開刪除大圖所在的層

$("#max").remove();

}).mousemove(function(e){

//鼠標(biāo)移動時改變大圖所在的層的坐標(biāo)

$("#max").css("top", e.pageY+20).css("left",e.pageX+10);

});

});

希望本文所述對大家的jquery程序設(shè)計有所幫助。

總結(jié)

以上是生活随笔為你收集整理的html鼠标划过显示图片,jquery实现鼠标滑过小图查看大图的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。