JavaScript 모방 Taobao 제품 세부 정보 돋보기 효과
- 小云云원래의
- 2018-03-15 16:36:512990검색
타오바오에 자주 방문해서 제품 상세정보를 볼 때, 제품 사진의 돋보기 기능을 자주 사용하는데, 예전에는 어떻게 구현하는지 몰랐는데, 요즘은 기본적으로 온라인에서 코드 수정을 찾아요. 아래에 돋보기 효과를 구현해 보겠습니다.
구현 원리:
큰 그림(클리어)과 작은 그림을 준비합니다. 두 그림은 동일해야 하며, 작은 섬네일에 마우스를 이동하면 위의 작은 그림이 나타납니다. 해당 그림을 표시합니다. 위의 작은 그림 안으로 마우스를 이동하면 확대/축소 및 큰 그림 상자가 표시되고, 마우스가 안쪽으로 이동하면 //마우스에서 시각화 창 왼쪽까지의 거리를 뺀 값을 통과합니다. 작은 그림 마스크 레이어 너비의 절반이 zomm의 왼쪽입니다. 같은 방식으로 top
zoom.style.left = event.clientX - Zoom.offsetWidth/2 + "px";의 값을 찾을 수 있습니다.
zoom.style.top = event.clientY - Zoom.offsetHeight/ 2 + “px”;
그런 다음 큰 그림의 크기를 작은 그림의 크기로 나누면 확대 비율을 얻을 수 있습니다. 두 장의 사진. 왼쪽의 작은 사진에 마우스를 올렸을 때, 배율을 통해 오른쪽의 큰 이미지가 왼쪽 또는 위로 오프셋되어야 하는 값을 알 수 있습니다. 원하는 결과를 얻을 수 있습니다.
//왼쪽에 있는 작은 마스크 레이어의 왼쪽 값에 사진 사이의 배율을 곱한 값이 오른쪽에 있는 큰 사진의 왼쪽 오프셋 값입니다
bigimg.style.left = "-" + Zoom.offsetLeft*scale + "px";
bigimg.style.top = "-" + Zoom.offsetTop*scale + "px";
코드로 바로 이동:
html 부분 :
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>javascript防淘宝放大镜效果</title>
<style>
*{padding:0;margin:0;}
#box{margin:10px 0 0 10px;}
#box .smallbox{position:relative;height:327px;width:300px;}
#box .bigbox{display:none;position:absolute;left:310px;top:0;height:327px;width:300px;overflow:hidden;}
#box .bigbox img{position:relative;}
#box .zoom{display:none;position:absolute;height:100px;width:100px;background:#000;opacity:0.75;}
#box .item{margin-top:5px;font-size:0;}
#box .item img{height:70px;width:70px;margin-right:6px;}
</style></head><body>
<p class="scale-img" id="box">
<p class="wrapbox">
<!--左边小图片-->
<p class="smallbox">
<!--放大镜小层-->
<p class="zoom"></p>
<img src="s-1.png" class="smallimg">
<!--右边大图片-->
<p class="bigbox">
<img src="b-1.png" class="bigimg">
</p>
</p>
<p class="item">
<img src="s-1.png" date-num = "1">
<img src="s-2.png" date-num = "2">
<img src="s-3.png" date-num = "3">
<img src="s-4.png" date-num = "4">
</p>
</p>
</p></body></html>javascript 부분:
(function(){
//预先加载大图，避免后面鼠标移入后显示大图时再去请求资源，影响体验
new Image().src = "b-1.png";
new Image().src = "b-2.png";
new Image().src = "b-3.png";
new Image().src = "b-4.png";
var smallbox = document.querySelector("#box .smallbox"); //小图片box
var bigbox = document.querySelector("#box .bigbox"); //大图片box
var smallimg = smallbox.querySelector(".smallimg"); //小图片
var bigimg = bigbox.querySelector(".bigimg"); //大图片
var zoom = document.querySelector(".zoom");
var itemImg = document.querySelectorAll("#box .item img");
for(var i = 0, len = itemImg.length; i < len; i++){
(function(j){
itemImg[j].onmouseenter = function(){
var imgSrc = this.src;
smallimg.src = imgSrc;
bigimg.src = "b-" + (j+1) + ".png";
}
})(i);
}
//鼠标移入事件
smallbox.onmouseenter = function(event){
zoom.style.display = "block";
bigbox.style.display ="block";
//注意：offsetWdith的值是要元素为可视状态下才可以计算出来，不然当display:none的时候则为0；
var scale = bigimg.offsetWidth/smallimg.offsetWidth; //放大倍数
var ev = event || window.event;
//鼠标在内部移动的时候
this.onmousemove = function(event){
//鼠标到可视化窗口左边的距离减去小图遮罩层的一半宽度则为zomm的left的值，同理可以求top的值
zoom.style.left = event.clientX - zoom.offsetWidth/2 + "px";
zoom.style.top = event.clientY - zoom.offsetHeight/2 + "px";
//如果向左向上移动小于0，那么则设置left为0,实现紧贴着边框效果
if(zoom.offsetLeft <= 0){
zoom.style.left = 0;
}
if(zoom.offsetTop <= 0){
zoom.style.top = 0;
}
//如果向右向下移动小于0，那么则设置top,实现紧贴着边框效果
if(zoom.offsetLeft >= smallbox.offsetWidth - zoom.offsetWidth){
zoom.style.left = smallbox.offsetWidth - zoom.offsetWidth + "px";
}
if(zoom.offsetTop >= smallbox.offsetHeight - zoom.offsetHeight){
zoom.style.top = smallbox.offsetHeight - zoom.offsetHeight + "px";
}
//左边小遮罩层left的值乘以图片之间的放大倍数，则为右边大图片的left偏移值，top同理
bigimg.style.left = "-" + zoom.offsetLeft*scale + "px";
bigimg.style.top = "-" + zoom.offsetTop*scale + "px";
}
}
//鼠标移出事件
smallbox.onmouseleave = function(){
bigbox.style.display = "none";
zoom.style.display = "none";
this.onmousemove = null;
}
}());관련 권장 사항:
JD.com 제품 세부 정보에 대한 돋보기 효과를 만드는 방법
위 내용은 JavaScript 모방 Taobao 제품 세부 정보 돋보기 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!