這篇文章主要介紹了jquery實現(xiàn)鼠標(biāo)滑過小圖查看大圖的方法,涉及jquery鼠標(biāo)事件及圖片樣式動態(tài)操作的相關(guān)技巧，具有一定參考借鑒價值，需要的朋友可以參考下

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

　　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部分：

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

　　<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 事件對象，可以通過該事件對象獲取事件的參數(shù) e.pageX - X軸，距瀏覽器的左邊的距離 e.pageY - y軸，距瀏覽器的頂端的距離
　　$("a").mouseover(function(e){
　　//鼠標(biāo)移上去 向body追加大圖元素
　　//大圖的路徑：當(dāng)前連接的href屬性值為大圖的路徑
　　var $imgSrc = $(this).attr("href");
　　var $maxImg ="<div id='max'><img src='"+$imgSrc+"'></div>";
　　//在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);
　　});
　　});
　　</script>

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