快捷導(dǎo)航

jQuery實(shí)現(xiàn)天貓商品放大鏡效果

更新時(shí)間：2022年03月31日 08:00:17 作者：onlyoneLIJINGYI

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)天貓商品放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)天貓商品放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下

思路：

1、分四部分：產(chǎn)品主圖，用來定位的小框，放大圖，和產(chǎn)品不同側(cè)面的小圖
2、定位的小框定位在產(chǎn)品主圖元素上，放大圖定位在右側(cè)，當(dāng)鼠標(biāo)進(jìn)入產(chǎn)品主圖時(shí)小框和放大圖顯示出來。
3、放大圖元素大小應(yīng)與產(chǎn)品主圖大小一樣，設(shè)置放大圖圖片大小為主圖大小的放大倍數(shù)，小框跟隨鼠標(biāo)移動(dòng)，小框偏移地址多少，放大圖偏移地址應(yīng)是其負(fù)數(shù)，只顯示小框區(qū)域的圖片。
4、使小框跟隨鼠標(biāo)移動(dòng)而移動(dòng)，即獲取鼠標(biāo)當(dāng)前位置，計(jì)算小框定位的top 、left值，并判斷范圍使其不超出主圖元素大小。
5、將小框的top、left值獲取給放大圖，使其顯示小框所在范圍，注意！！放大圖是主圖的幾倍top、left值也擴(kuò)大相應(yīng)倍數(shù)，并且值應(yīng)是負(fù)數(shù)，小框右移，放大圖圖片應(yīng)該左移，從而達(dá)到效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>產(chǎn)品頁(yè)面</title>
<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet"  rel="external nofollow" >?
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet"  rel="external nofollow" >
<style type="text/css">
*{
margin:0;
padding:0;
}
.product{
margin-left:50px;
width:400px;
}
.product-img{
margin:20px auto;
text-align:center;
}
.showimg{
position:relative;
width:400px;
height:400px;
border:1px solid #f5f5f5;
}
.show{
width:400px;
height:400px;
}
.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:200px;
height:200px;
background-color:lightblue;
display:none;
}
.showlarge{
position:absolute;
overflow:hidden;
top:0;
left:420px;
width:400px;
height:400px;
border:1px solid #f5f5f5;
display:none;
}
.showlarge img{
width:800px;
height:800px;
position:absolute;
}
</style>
<script>

$(function() {
?? ?//鼠標(biāo)移入產(chǎn)品小圖事件
?? ?$(".product-img img").mouseenter(function(){//鼠標(biāo)懸浮在不同的產(chǎn)品小圖片時(shí)外加黑色邊框并且主圖將其顯示出來
?? ??? ?$(".product-img img").css({"border":"2px solid #FFF"});
?? ??? ?$(this).css({"border":"2px solid #000"});//this獲取的是當(dāng)前鼠標(biāo)移入的元素，設(shè)置黑色邊框
?? ??? ?var imgsrc=$(this).attr("src");//獲取當(dāng)前鼠標(biāo)移入元素的src屬性值將其賦值給主圖元素
?? ??? ?$(".show").attr("src",imgsrc);
?? ??? ?$(".showlarge img").attr("src",imgsrc);//將鼠標(biāo)選中的圖傳給放大圖元素的src屬性
?? ?});
?? ?//鼠標(biāo)移入產(chǎn)品主圖時(shí)出現(xiàn)放大的細(xì)節(jié)圖和小框?
?? ?$(".showimg").mouseenter(function(){
?? ??? ?$(".showbox").show();
?? ??? ?$(".showlarge").show();
?? ?});
?? ?//鼠標(biāo)在產(chǎn)品主圖移動(dòng)事件
?? ?$(".showimg").mousemove(function(e){
?? ??? ?var mousex=e.clientX;//獲取鼠標(biāo)當(dāng)前對(duì)于瀏覽器可視區(qū)的X坐標(biāo)
?? ??? ?var mousey=e.clientY;
?? ??? ?var imgx=$(".showimg").offset().left;//獲得產(chǎn)品主圖對(duì)于文檔的偏移坐標(biāo)
?? ??? ?var imgy=$(".showimg").offset().top;
?? ??? ?//小框的left值是鼠標(biāo)位移減去產(chǎn)品圖元素偏移坐標(biāo)減去小框?qū)挾鹊囊话耄故髽?biāo)保持位于小框的中間
?? ??? ?var boxleft=mousex-imgx-$(".showbox").width()/2;//計(jì)算小框?qū)τ诋a(chǎn)品主圖元素的距離用來定位
?? ??? ?var boxtop=mousey-imgy-$(".showbox").height()/2;
?? ??? ?//鼠標(biāo)移動(dòng)小框位置跟著變化
?? ??? ?$(".showbox").css({"top":boxtop,"left":boxleft});
?? ??? ?//計(jì)算小框移動(dòng)的最大范圍
?? ??? ?var maxtop=$(".showimg").height()-$(".showbox").height();
?? ??? ?var maxleft=$(".showimg").width()-$(".showbox").width();
?? ??? ?//判斷小框移動(dòng)的邊界
?? ??? ?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);
?? ??? ?}
?? ??? ?//設(shè)置放大圖的位置偏移量，獲取小框偏移量乘放大倍數(shù)，注意?。。》糯髨D偏移量應(yīng)設(shè)置為負(fù)值
?? ??? ?var showleft=-$(".showbox").position().left*2;//position()方法返回當(dāng)前元素相對(duì)于父元素的位置（偏移）
?? ??? ?var showtop=-$(".showbox").position().top*2;
?? ??? ?//此處獲取小框偏移量不應(yīng)該使用前面計(jì)算出來的boxtop和boxleft值，因可能會(huì)出現(xiàn)超出移動(dòng)的邊界
?? ??? ?$(".showlarge img").css({"left":showleft,"top":showtop});
?? ?});
?? ?//鼠標(biāo)離開產(chǎn)品主圖元素事件，此處使用mouseleave事件只有在鼠標(biāo)指針離開被選元素時(shí)才會(huì)觸發(fā)，mouseout鼠標(biāo)指針離開被選元素和其任何子元素都會(huì)觸發(fā)。
?? ?$(".showimg").mouseleave(function(){
?? ??? ?$(".showbox").hide();//小框隱藏
?? ??? ?$(".showlarge").hide();//放大圖隱藏
?? ?});
?? ?
});
</script>
</head>
<body>
<div class="product">
<div class="showimg">
<img class="show" src="images/product3.png">
<div class="showbox"></div>
<div class="showlarge">
<img src="images/product3.png">
</div>
</div>
<div class="product-img">
<img src="images/product3.png">
<img src="images/product3-2.png">
<img src="images/product3-3.png">
<img src="images/product3-2.png">
<img src="images/product3-3.png">
</div>
</div>
</body>
</html>

效果如圖：