首先是两个显示的盒子的设置
样式部分:
<style>
.zoomglass{
position: relative;
}
.clear::after
{
content: "";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility: hidden;
}
.carouel-con{
position: absolute;
width: 452px;
height: 58px;
left:0px;
top:460px;
}
.left,.right{
width: 22px;
height: 32px;
background-image: url(./img/iphone/download-1.png);
background-position: 0 -54px;
float: left;
top:50%;
transform: translate(0,-50%);
position: relative;
}
.right{
background-position: -78px 0;
right:0px;
position: absolute;
}
.carousel{
float: left;
width: 380px;
height: 58px;
position: absolute;
margin: 0 auto;
left: 0;
right:0;
overflow: hidden;
}
.imgcon{
position: absolute;
left: 0;
transition: all 0.5s;
}
.imgcon>img{
width: 54px;
height: 54px;
border: 2px solid transparent;
margin: 0 9px;
}
</style>
html部分:
<div class="zoomglass clear">
<div class="mini">
<div class="mask"></div>
</div>
<div class="zoom"></div>
<div class="carouel-con clear">
<div class="left"></div>
<div class="carousel">
<div class="imgcon">
</div>
</div>
<div class="right"></div>
</div>
</div>
js部分:
<script type="module">
import Utils from "./js/Utils.js";
var arr=Array(10).fill(1).map((t,i)=>(i+1)+".jpg");
arr.unshift("10-.jpg");
arr.unshift("12-.jpg");
arr.unshift("24-.jpg");
arr.unshift("25-.jpg");
arr.unshift("26-.jpg");
arr.unshift("27-.jpg");
arr.unshift("28-.jpg");
arr.unshift("29-.jpg");
arr.unshift("30-.jpg");
var first=0;
const SCALE_1=0.5625,SCALE_2=1.2;
var list,mini,mask,zoom,imgcon,left,right,prev;
init();
function init(){
mini=document.querySelector(".mini");
mask=document.querySelector(".mask");
zoom=document.querySelector(".zoom");
imgcon=document.querySelector(".imgcon");
left=document.querySelector(".left");
right=document.querySelector(".right");
Utils.loadImage(arr,finishHandler,"./img/iphone")
}
function finishHandler(_list){
list=_list;
imgcon.innerHTML=arr.reduce((v,t)=>v+`<img src='./img/iphone/${t}'>`,"");
imgcon.style.width=arr.length*76+"px";
mini.addEventListener("mouseenter",mouseHandler);
mini.addEventListener("mouseleave",mouseHandler);
left.addEventListener("click",bnClickHandler);
right.addEventListener("click",bnClickHandler);
imgcon.addEventListener("mouseover",iconMouseHandler);
var evt=new MouseEvent("mouseover",{bubbles:true});
imgcon.firstElementChild.dispatchEvent(evt);
}
function setSize(img){
Object.assign(mini.style,{
width:img.width*SCALE_1+"px",
height:img.height*SCALE_1+"px",
border:"1px solid #999",
float:"left",
position:"relative",
left:"0px",
top:"0px",
backgroundImage:`url(${img.src})`,
backgroundSize:"100% 100%"
})
Object.assign(zoom.style,{
width:img.width*SCALE_1*SCALE_2+"px",
height:img.height*SCALE_1*SCALE_2+"px",
border:"1px solid #999",
float:"left",
backgroundImage:`url(${img.src})`,
display:"none"
})
Object.assign(mask.style,{
width:img.width*(SCALE_1**2)*SCALE_2+"px",
height:img.height*(SCALE_1**2)*SCALE_2+"px",
backgroundColor:"#ddcc6666",
position:"absolute",
left:"0px",
top:"0px",
display:"none"
})
}
function mouseHandler(e){
if(e.type==="mouseenter"){
zoom.style.display=mask.style.display="block"
mini.addEventListener("mousemove",mouseHandler);
}else if(e.type==="mouseleave"){
zoom.style.display=mask.style.display="none"
}else if(e.type==="mousemove"){
var rect=mini.getBoundingClientRect();
var x=e.clientX-rect.x-mask.offsetWidth/2;
var y=e.clientY-rect.y-mask.offsetHeight/2;
if(x<0) x=0;
if(y<0) y=0;
if(x>rect.width-mask.offsetWidth) x=rect.width-mask.offsetWidth;
if(y>rect.height-mask.offsetHeight) y=rect.height-mask.offsetHeight;
mask.style.left=x+"px";
mask.style.top=y+"px";
zoom.style.backgroundPositionX=-x*(zoom.offsetWidth/mask.offsetWidth)+"px";
zoom.style.backgroundPositionY=-y*(zoom.offsetWidth/mask.offsetWidth)+"px";
}
}
function bnClickHandler(e){
if(this===left){
if(first>=5) first-=5;
else first=0;
}else if(this===right){
if(first+10<=arr.length-1) first+=5;
else first=arr.length-5;
}
imgcon.style.left=-first*76+"px";
}
function iconMouseHandler(e){
if(e.target.nodeName!=="IMG") return;
if(prev){
prev.style.borderColor="transparent"
}
prev=e.target;
prev.style.borderColor="red";
setSize(list[Array.from(imgcon.children).indexOf(e.target)]);
// mini.style.backgroundImage=zoom.style.backgroundImage=`url(${e.target.src})`;
}
</script>
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.zoomglass{
position: relative;
}
.clear::after
{
content: "";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility: hidden;
}
.carouel-con{
position: absolute;
width: 452px;
height: 58px;
left:0px;
top:460px;
}
.left,.right{
width: 22px;
height: 32px;
background-image: url(./img/iphone/download-1.png);
background-position: 0 -54px;
float: left;
top:50%;
transform: translate(0,-50%);
position: relative;
}
.right{
background-position: -78px 0;
right:0px;
position: absolute;
}
.carousel{
float: left;
width: 380px;
height: 58px;
position: absolute;
margin: 0 auto;
left: 0;
right:0;
overflow: hidden;
}
.imgcon{
position: absolute;
left: 0;
transition: all 0.5s;
}
.imgcon>img{
width: 54px;
height: 54px;
border: 2px solid transparent;
margin: 0 9px;
}
</style>
</head>
<body>
<div class="zoomglass clear">
<div class="mini">
<div class="mask"></div>
</div>
<div class="zoom"></div>
<div class="carouel-con clear">
<div class="left"></div>
<div class="carousel">
<div class="imgcon">
</div>
</div>
<div class="right"></div>
</div>
</div>
<script type="module">
import Utils from "./js/Utils.js";
var arr=Array(10).fill(1).map((t,i)=>(i+1)+".jpg");
arr.unshift("10-.jpg");
arr.unshift("12-.jpg");
arr.unshift("24-.jpg");
arr.unshift("25-.jpg");
arr.unshift("26-.jpg");
arr.unshift("27-.jpg");
arr.unshift("28-.jpg");
arr.unshift("29-.jpg");
arr.unshift("30-.jpg");
var first=0;
const SCALE_1=0.5625,SCALE_2=1.2;
var list,mini,mask,zoom,imgcon,left,right,prev;
init();
function init(){
mini=document.querySelector(".mini");
mask=document.querySelector(".mask");
zoom=document.querySelector(".zoom");
imgcon=document.querySelector(".imgcon");
left=document.querySelector(".left");
right=document.querySelector(".right");
Utils.loadImage(arr,finishHandler,"./img/iphone")
}
function finishHandler(_list){
list=_list;
imgcon.innerHTML=arr.reduce((v,t)=>v+`<img src='./img/iphone/${t}'>`,"");
imgcon.style.width=arr.length*76+"px";
mini.addEventListener("mouseenter",mouseHandler);
mini.addEventListener("mouseleave",mouseHandler);
left.addEventListener("click",bnClickHandler);
right.addEventListener("click",bnClickHandler);
imgcon.addEventListener("mouseover",iconMouseHandler);
var evt=new MouseEvent("mouseover",{bubbles:true});
imgcon.firstElementChild.dispatchEvent(evt);
}
function setSize(img){
Object.assign(mini.style,{
width:img.width*SCALE_1+"px",
height:img.height*SCALE_1+"px",
border:"1px solid #999",
float:"left",
position:"relative",
left:"0px",
top:"0px",
backgroundImage:`url(${img.src})`,
backgroundSize:"100% 100%"
})
Object.assign(zoom.style,{
width:img.width*SCALE_1*SCALE_2+"px",
height:img.height*SCALE_1*SCALE_2+"px",
border:"1px solid #999",
float:"left",
backgroundImage:`url(${img.src})`,
display:"none"
})
Object.assign(mask.style,{
width:img.width*(SCALE_1**2)*SCALE_2+"px",
height:img.height*(SCALE_1**2)*SCALE_2+"px",
backgroundColor:"#ddcc6666",
position:"absolute",
left:"0px",
top:"0px",
display:"none"
})
}
function mouseHandler(e){
if(e.type==="mouseenter"){
zoom.style.display=mask.style.display="block"
mini.addEventListener("mousemove",mouseHandler);
}else if(e.type==="mouseleave"){
zoom.style.display=mask.style.display="none"
}else if(e.type==="mousemove"){
var rect=mini.getBoundingClientRect();
var x=e.clientX-rect.x-mask.offsetWidth/2;
var y=e.clientY-rect.y-mask.offsetHeight/2;
if(x<0) x=0;
if(y<0) y=0;
if(x>rect.width-mask.offsetWidth) x=rect.width-mask.offsetWidth;
if(y>rect.height-mask.offsetHeight) y=rect.height-mask.offsetHeight;
mask.style.left=x+"px";
mask.style.top=y+"px";
zoom.style.backgroundPositionX=-x*(zoom.offsetWidth/mask.offsetWidth)+"px";
zoom.style.backgroundPositionY=-y*(zoom.offsetWidth/mask.offsetWidth)+"px";
}
}
function bnClickHandler(e){
if(this===left){
if(first>=5) first-=5;
else first=0;
}else if(this===right){
if(first+10<=arr.length-1) first+=5;
else first=arr.length-5;
}
imgcon.style.left=-first*76+"px";
}
function iconMouseHandler(e){
if(e.target.nodeName!=="IMG") return;
if(prev){
prev.style.borderColor="transparent"
}
prev=e.target;
prev.style.borderColor="red";
setSize(list[Array.from(imgcon.children).indexOf(e.target)]);
// mini.style.backgroundImage=zoom.style.backgroundImage=`url(${e.target.src})`;
}
</script>
</body>
</html>