E-commerce magnifier
I. Some Piecemeal Knowledge Points
1.style can only get in-line styles, but can be modified
window.getComputedStyle can get all the styles in the browser, but it can't be modified.
2. If you use child elements, you must add children []
Eg: middle. children [0]. src attribute of the first child element below src middle
2. html code
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/js.js"></script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.big{
margin: auto;
width: 350px;
height: 500px;
position: relative;
}
.middle{
width: 350px;
height: 420px;
border: solid 1px silver;
position: relative;
}
.middle img{
width: 100%;
height:100%;
}
.small{
width: 350px;
height: 80px;
font-size: 0; /*There will be gaps between the block-to-row blocks, using font-size:0; clearing gaps*/
border-top: solid 1px silver; /*Line*/
padding-top: 10px;
position: relative;
}
.s-photo{
display: inline-block;
width: 60px;
height: auto;
margin-left: 5px;
border: solid 3px transparent;
}
.s-chang{
width:520px;
/*margin-top: 11px;*/ /*mar will move down and give a line to the upper border.*/
margin-left: 0;
-webkit-transition: margin-left .4s linear;
-moz-transition: margin-left .4s linear ;
-o-transition: margin-left .4s linear ;
transition: margin-left .4s linear;
}
.s-duan{
width: 310px;
height: 60px;
overflow: hidden;
margin: auto;
}
.small span{
font-size: 15px;
width: 20px;
height: 78px;
line-height: 78px;
display: inline-block;
position: absolute;
text-align: center;
background: silver;
cursor: pointer;
}
.btn-left{
top: 0;
left: 0;
}
.btn-right{
top: 0;
right: 0;
}
//Another way to write two buttons
/* /!*One uses span, the other uses pseudo-Class selector*!/
.s-duan::before,.s-duan::after{
height: 80px;
width: 20px;
font-size: 15px;
position: absolute;
text-align: center;
line-height: 80px;
}
.s-duan::after{
content: ">";
top: 0;
right: 0;
}
.s-duan::before{
content: "<";
top: 0;
left: 0;
}*/
.mid-src{
position: absolute;
width: 150px;
height: 200px;
background: url("images/bg.png") ;
-webkit-background-size: 5px 5px;
background-size: 5px 5px;
display: none;
cursor: move; //Let the mouse go up and move
}
.big-right{
width: 350px;
height: 520px;
border: solid 1px silver;
position: absolute;
left: 349px;
display: none;
background: url("images/big1.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="big">
<div class="big-right"></div>
<div class="middle">
<div class="mid-src"></div><!--layer-->
<img src="images/middle1.jpg" alt=""/>
</div>
<div class="small">
<span class="btn-left"><</span>
<div class="s-duan">
<div class="s-chang"> //Keep writing div s to hide pictures
<div class="s-photo"><img src="images/small1.jpg" data-big="images/big1.jpg" data-src="images/middle1.jpg" alt=""/></div>
<div class="s-photo"><img src="images/small2.jpg" data-big="images/big2.jpg" data-src="images/middle2.jpg" alt=""/></div>
<div class="s-photo"><img src="images/small3.jpg" data-big="images/big3.jpg" data-src="images/middle3.jpg" alt=""/></div>
<div class="s-photo"><img src="images/small4.jpg" data-big="images/big4.jpg" data-src="images/middle4.jpg" alt=""/></div>
<div class="s-photo"><img src="images/small5.jpg" data-big="images/big5.jpg" data-src="images/middle5.jpg" alt="" /></div>
<div class="s-photo"><img src="images/small6.jpg" data-big="images/big6.jpg" data-src="images/middle6.jpg" alt=""/></div>
<div class="s-photo"><img src="images/small7.jpg" data-big="images/big7.jpg" data-src="images/middle7.jpg" alt=""/></div>
<div class="s-photo"><img src="images/small8.jpg" data-big="images/big8.jpg" data-src="images/middle8.jpg" alt=""/></div>
</div>
</div>
<span class="btn-right">></span>
</div>
</div>
</body>
</html>
Two.js code
1. Achieve the mouse to place on the small picture, the small picture border becomes red.
With temp variable, store the first box after the mouse moves
var temp;
window.onload=function(){
var sphoto =document.getElementsByClassName("s-photo");
var middle =document.getElementsByClassName("middle")[0];
temp=document.getElementsByClassName("s-photo")[0];
temp.style.borderColor = "red";
for(var i=0;i<sphoto.length;i++){
sphoto[i].onmouseenter = function(){
temp.style.borderColor="transparent";
this.style.borderColor="red";
temp=this;
console.log(this.children[0].getAttribute("data-src"))
middle.children[0].src = this.children[0].getAttribute("data-src");
}
}
}
2. Click on the left and right span s to move the image in small
btnleft.onclick=function(){
schang.style.marginLeft="0";
}
btnright.onclick=function(){
schang.style.marginLeft=-212+"px";
}
3. Place the mouse in the middle of midsrc
x=x-big.offsetLeft-parseFloat(window.getComputedStyle(midsrc).width)/2; /*style Only the in-line style window.get can get all the styles in the browser, but cannot be modified*/ y=y-big.offsetTop-parseFloat(window.getComputedStyle(midsrc).height)/2; /*The offset of the left offset relative to the parent element*/
4. Limit the shadow layer to the middle box
var bigleft = (parseFloat(window.getComputedStyle(middle).width))-parseFloat(window.getComputedStyle(midsrc).width);
var bigtop = (parseFloat(window.getComputedStyle(middle).height))-parseFloat(window.getComputedStyle(midsrc).height);
/* console.log(bigleft);
console.log(bigtop);*/
if(x<=0 ){
x=0;
}
else{ /*x>0*/
if(x>=bigleft){
x=bigleft;
}
else{}
}
if(y<0){
y=0;
}
else{ /*y>0*/
if(y>=bigtop){
y=bigtop;
}
else{}
}
midsrc.style.left = x + "px";
midsrc.style.top = y + "px"
5. Correspond the pictures one by one
middle.children[1].src = this.children[0].getAttribute("data-src"); //img under middle (second sub-element) div
bigright.style.backgroundImage="url(" + this.children[0].getAttribute("data-big") + ")"; //this refers to the current corresponding sphoto
6. When the mouse moves the shadow layer, the big picture moves with it.
bigright.style.backgroundPosition = (-x / 0.4375) + "px " + (-y / 0.525) + "px";
7. The complete code is as follows
var temp=null;
window.onload=function(){
var sphoto =document.getElementsByClassName("s-photo");
var middle =document.getElementsByClassName("middle")[0];
var big = document.getElementsByClassName("big")[0];
var btnleft =document.getElementsByClassName("btn-left")[0];
var btnright =document.getElementsByClassName("btn-right")[0];
var schang=document.getElementsByClassName("s-chang")[0];
var midsrc=document.getElementsByClassName("mid-src")[0];
var bigright=document.getElementsByClassName("big-right")[0];
temp=document.getElementsByClassName("s-photo")[0];
temp.style.borderColor="red";
for(var i=0;i<sphoto.length;i++){
sphoto[i].onmouseenter=function(){
temp.style.borderColor="transparent";
this.style.borderColor="red";
temp=this;//Exist the current object in temp. When the mouse moves next, the current object becomes transparent.
middle.children[1].src = this.children[0].getAttribute("data-src");//img under middle (second sub-element) div
bigright.style.backgroundImage="url(" + this.children[0].getAttribute("data-big") + ")";//this refers to the current corresponding sphoto
}
}
//Left and Right Click Events
btnleft.onclick=function(){
schang.style.marginLeft="0";
}
btnright.onclick=function(){
schang.style.marginLeft=-212+"px";
}
//mid-src Mobile
middle.onmouseenter=function(){
midsrc.style.display="block";
bigright.style.display="block";
}
middle.onmouseleave=function(){
midsrc.style.display="none";
bigright.style.display="none";
}
middle.onmousemove=function(e){
var x= e.pageX || e.clientX;
var y= e.pagesY || e.clientY;
/*Let the mouse move with the basket first*/
x=x-big.offsetLeft-parseFloat(window.getComputedStyle(midsrc).width)/2; /*style Only the in-line style window.get can get all the styles in the browser, but cannot be modified*/
y=y-big.offsetTop-parseFloat(window.getComputedStyle(midsrc).height)/2; /*The offset of the left offset relative to the parent element*/
console.log(x);
console.log(y);
/* Limit x y;*/
var bigleft = (parseFloat(window.getComputedStyle(middle).width))-parseFloat(window.getComputedStyle(midsrc).width);
var bigtop = (parseFloat(window.getComputedStyle(middle).height))-parseFloat(window.getComputedStyle(midsrc).height);
/* console.log(bigleft);
console.log(bigtop);*/
if(x<=0 ){
x=0;
}
else{ /*x>0*/
if(x>=bigleft){
x=bigleft;
}
else{}
}
if(y<0){
y=0;
}
else{ /*y>0*/
if(y>=bigtop){
y=bigtop;
}
else{}
}
midsrc.style.left = x + "px";
midsrc.style.top = y + "px"; /*midsrc Location is calculated by the mouse position, so follow the mouse.*/
bigright.style.backgroundPosition = (-x / 0.4375) + "px " + (-y / 0.525) + "px";
//Fig. 350 420, Fig. 800800, 0.4375, 0.525
// The ratio of midsrc 150 200 303 to mid-scr is equal to the ratio of mid-scr to mid-scr
}
}