本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
