----css程式碼---
*{margin:0;padding:0;
}
.showimg{position:relative;width:450px;height:420px;border:1px solid #f5f5f5;
}
.show{width:450px;height:420px;
}
.product-img img{margin:0 3px;width:60px;height:60px;border:2px solid #FFF;
}
.showbox{position:absolute;top:0;left:0;opacity:0.5;cursor:move;width:225px;height:210px;background-color:lightblue;display:none;
}
.showlarge{position:absolute;overflow:hidden;top:0;left:470px;width:450px;height:420px;border:1px solid #f5f5f5;display:none;
}
.showlarge img{width:900px;height:840px;position:absolute;
}

---html程式碼---
<div class="showimg">
<img class="show" src="img/01.jpg">
<div class="showbox"></div>
<div class="showlarge">
<img src="img/01.jpg">
</div>
</div>
<div class="product-img">
<img src="img/01.jpg">
<img src="img/img1.jpg">
<img src="img/img2.jpg">
<img src="img/img3.jpg">
<img src="img/01.jpg">
</div>
</div>
----js程式碼----
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>

$(function() {
//滑鼠移入產品小圖事件
$(".product-img img").mouseenter(function(){//滑鼠懸浮在不同的產品小圖片時外加黑色邊框並且主圖將其顯示出來
$(".product-img img").css({"border":"2px solid #FFF"});
$(this).css({"border":"2px solid #000"});//this獲取的是當前滑鼠移入的元素，設定黑色邊框
var imgsrc=$(this).attr("src");//獲取當前滑鼠移入元素的src屬性值將其賦值給主圖元素
$(".show").attr("src",imgsrc);
$(".showlarge img").attr("src",imgsrc);//將滑鼠選中的圖傳給放大圖元素的src屬性
});
//滑鼠移入產品主圖時出現放大的細節圖和小框
$(".showimg").mouseenter(function(){
$(".showbox").show();
$(".showlarge").show();
});
//滑鼠在產品主圖移動事件
$(".showimg").mousemove(function(e){
var mousex=e.clientX;//獲取滑鼠當前對於瀏覽器可視區的X座標
var mousey=e.clientY;
var imgx=$(".showimg").offset().left;//獲得產品主圖對於文件的偏移座標
var imgy=$(".showimg").offset().top;
//小框的left值是滑鼠位移減去產品圖元素偏移座標減去小框寬度的一半，使滑鼠保持位於小框的中間
var boxleft=mousex-imgx-$(".showbox").width()/2;//計算小框對於產品主圖元素的距離用來定位
var boxtop=mousey-imgy-$(".showbox").height()/2;
//滑鼠移動小框位置跟著變化
$(".showbox").css({"top":boxtop,"left":boxleft});
//計算小框移動的最大範圍
var maxtop=$(".showimg").height()-$(".showbox").height();
var maxleft=$(".showimg").width()-$(".showbox").width();
//判斷小框移動的邊界
if(boxtop<=0){
$(".showbox").css("top","0");
}else if(boxtop>maxtop){
$(".showbox").css("top",maxtop);
}
if(boxleft<=0){
$(".showbox").css("left","0");
}else if(boxleft>maxleft){
$(".showbox").css("left",maxleft);
}
//設定放大圖的位置偏移量，獲取小框偏移量乘放大倍數，注意！！！放大圖偏移量應設定為負值
var showleft=-$(".showbox").position().left*2;//position()方法返回當前元素相對於父元素的位置（偏移）
var showtop=-$(".showbox").position().top*2;
//此處獲取小框偏移量不應該使用前面計算出來的boxtop和boxleft值，因可能會出現超出移動的邊界
$(".showlarge img").css({"left":showleft,"top":showtop});
});
//滑鼠離開產品主圖元素事件，此處使用mouseleave事件只有在滑鼠指標離開被選元素時才會觸發，mouseout滑鼠指標離開被選元素和其任何子元素都會觸發。
$(".showimg").mouseleave(function(){
$(".showbox").hide();//小框隱藏
$(".showlarge").hide();//放大圖隱藏
});

});
</script>

 

實現的效果如下：

相關推薦