jquery實現滑鼠滑過小圖查看大圖的方法，jquery查看大圖

jquery實現滑鼠滑過小圖查看大圖的方法，jquery查看大圖

本文執行個體講述了jquery實現滑鼠滑過小圖查看大圖的方法。分享給大家供大家參考。具體實現方法如下：

1. CSS部分：

<style type="text/css">ul{  list-style:none;}li{  float:left;  margin-left:10px;}img{  border:#CCCCCC solid 1px;}#max{  position:absolute;  display:none; /*隱藏層*/}</style>

2. HTML部分：

蘋果產品列表：<ul><li><a href="images/apple_1_bigger.jpg"><img src="images/apple_1.jpg" /></a><li><a href="images/apple_2_bigger.jpg"><img src="images/apple_2.jpg" /></a><li><a href="images/apple_3_bigger.jpg"><img src="images/apple_3.jpg" /></a><li><a href="images/apple_4_bigger.jpg"><img src="images/apple_4.jpg" /></a></ul>

3. javascript部分：

<script>$(document).ready(function(){  //e 事件對象，可以通過該事件對象擷取事件的參數 e.pageX - X軸，距瀏覽器的左邊的距離 e.pageY - y軸，距瀏覽器的頂端的距離   $("a").mouseover(function(e){  //滑鼠移上去 向body追加大圖元素    //大圖的路徑：當前串連的href屬性值為大圖的路徑    var $imgSrc = $(this).attr("href");    var $maxImg ="<div id='max'><img src='"+$imgSrc+"'></div>";    //在body中添加元素    $("body").append($maxImg);    //設定層的top和left座標，並動畫顯示層    $("#max").css("top", e.pageY+20).css("left",e.pageX+10).show('slow');   }).mouseout(function(){  //滑鼠移開刪除大圖所在的層    $("#max").remove();  }).mousemove(function(e){  //滑鼠移動時改變大圖所在的層的座標    $("#max").css("top", e.pageY+20).css("left",e.pageX+10);  });});</script>

希望本文所述對大家的jquery程式設計有所協助。