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

　　本文實(shí)例講述了jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)小圖查看大圖的方法。分享給大家供大家參考。具體實(shí)現(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 事件對(duì)象，可以通過(guò)該事件對(duì)象獲取事件的參數(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)，并動(dòng)畫顯示層
　　$("#max").css("top", e.pageY+20).css("left",e.pageX+10).show('slow');
　　}).mouseout(function(){
　　//鼠標(biāo)移開(kāi)刪除大圖所在的層
　　$("#max").remove();
　　}).mousemove(function(e){
　　//鼠標(biāo)移動(dòng)時(shí)改變大圖所在的層的坐標(biāo)
　　$("#max").css("top", e.pageY+20).css("left",e.pageX+10);
　　});
　　});
　　</script>

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