DIV CSS 佈局教程網

本文實例講述了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程序設計有所幫助。