There is often a product display area on the product page of the shopping website. One function in this picture area is the magnification function of the product picture. Move the focus area on the left to enlarge the details and view the details. The details are as follows. The method to implement this function is also very simple.
Experiment: Making a magnified image of the product focus.
Required Skills:
1. Basic methods to obtain page elements;
2. A few simple events;
3. The attributes of the element will be set using dom;
Case principle:
1. Follow the mouse event of the focus box;
2. Regulations on the moving area of the focus box;
3. Display of contents of large boxes;
Suitable for: js beginners
-------------------------------------------------------------------start! ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. First, we prepare the CSS style. Several points that need to be paid attention to in the CSS style are:
(1) The focus map is relative to position, default display: none;
(2) The box showing the large image on the right (hereinafter referred to as the large image frame) default display: none; the content in the large image frame must be hidden after overflow: hidden;
2. Start writing script code:
(1) First get the page element:
//First of all, the element function getId(tag) to be operated{ //Define a method to obtain elements with id, which reduces a lot of workload! return document.getElementById(tag) } var box=getId("box"); var small=getId("small"); var mask=getId("mask"); var big=getId("big"); var pic=big.children[0]; //Here is to get elements through the node method(2) Make sure that two events will appear when the mouse moves to the small picture: 1) The focus box should be shown; 2) The large picture box should be shown. Similarly, after the mouse is removed, these two leaves must be cancelled.
//Two effects appear when moving the mouse to the picture small.onmouseover=function(){ mask.style.display="block"; big.style.display="block"; } small.onmouseout=function(){ mask.style.display="none"; big.style.display="none" }(3) Set the following of the focus box:
1) When the focus box is set, our follow time is a fact, so the event type here is not onmouseover; but onmousemove;
2) The problem involved in this code is mainly a mask (focus box) positioning calculation problem. The problem that is easy to ignore is whose position the mask moves? In my css style, mask is placed in the small box, so the relative moving position must be the position of the parent element small that has been positioned. So the position coordinates I get with clientX and clientY relative to the current window of the browser cannot be used directly, and the influence of the margin value of its parent box must be subtracted.
//Set the focus box of the small image and follow the mouse; small.onmousemove=function(e){ var marginL=box.offsetLeft; //Use offsetLeft method to obtain the margin-left of the box var marginT=box.offsetTop; //Use offsetTop method to obtain the margin-top of the box var currentX=e.clientX; var currentY=e.clientY; //Use e.clinetY and e.clinetY relative to the upper left corner of the browser var x=currentX-marginL-mask.offsetWidth/2; var y=currentY-marginT-mask.offsetHeight/2; //To align the center of the focus box with the mouse, you need to subtract half of the width and height of the focus box/------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------(4) Movement of the position of the idle focus box
1) After the previous step is completed, the movement of the focus box is not idle. During the process of browsing the shopping website, we can clearly feel that the focus box does not allow movement outside the small picture, causing a bad user experience;
2) To limit the movement of the focus box, mainly when the x and y change exceed the allowable value, give it a fixed value;
//Set the focus box of the small image and follow the mouse; small.onmousemove=function(e){ var marginL=box.offsetLeft; var marginT=box.offsetTop; var currentX= e.clientX; var currentY= e.clientY; var x=currentX-marginL-mask.offsetWidth/2; var y=currentY-marginT-mask.offsetHeight/2; //Set the moving area for the focus box if(x<0){x=0;} if(x>small.offsetWidth-mask.offsetWidth) {x=small.offsetWidth-mask.offsetWidth}; // The minimum value of x used for positioning is 0, and the maximum value is the length of small-mask length y-axis. The same is true for the y-axis if(y<0){y=0;} if(y>small.offsetHeight-mask.offsetHeight) {y=small.offsetHeight-mask.offsetHeight}; mask.style.left=x+"px"; //Note that the moving area is written after the movement area is specified, and pay attention to the execution order of the code mask.style.top=y+"px";(5) Set the display of large images
1) To realize the movement of the picture in the big box, you should think of the -margin value;
2) How much distance can you move can be used to multiply the left and top values of the mask by a fixed proportion. Think about the position displayed in the upper left corner of the focus area and the upper left corner of the large image frame are the same! ! ! This is not very difficult to understand.
//Set the content displayed in the big box var relativeX=mask.offsetLeft; var relativeY=mask.offsetTop; var proporationX=pic.offsetWidth/small.offsetWidth; //Set the ratio var proporationY=pic.offsetHeight/small.offsetWidth; pic.style.marginLeft=-relativeX*proporationX+"px"; //Note! The value of margin must be negative, "px do not throw away pic.style.marginTop=-relativeY*proporationY+"px";
At this point, our demo is finished! Isn't it very simple
I will paste the entire code below, hoping to discuss and communicate with you.
Here is the css code
<style> * { margin: 0; padding: 0; } #box { margin: 50px; } #small { width: 229px; height: 250px; border: 1px solid black; text-align: center; position: relative; float: left; } #mask { width: 100px; height: 100px; background-color: rgba(214, 111, 193, 0.3); position: absolute; top: 0; left: 0; /*display: none;*/ } #big { width: 350px; height: 350px; border: 1px solid black; float: left; overflow: hidden; /*display: none;*/ } </style>Here is HTML
<body><div id="box"> <div id="small"> <img src="small_img.jpg"/> <div id="mask"></div> </div> <div id="big"> <img src="big_img.JPG"/> </div></div>
Here is the js code
<script> //First of all, the element to be operated function getId(tag){ return document.getElementById(tag) } var box=getId("box"); var small=getId("small"); var mask=getId("mask"); var big=getId("big"); var pic=big.children[0]; console.log(pic); //The mouse moves to the picture and two effects appear small.onmouseover=function(){ mask.style.display="block"; big.style.display="block"; } small.onmouseout=function(){ mask.style.display="none"; big.style.display="none" } //Set the focus box of the small image and follow the mouse; small.onmousemove=function(e){ var marginL=box.offsetLeft; var marginT=box.offsetTop; var currentX= e.clientX; var currentY= e.clientY; var x=currentX-marginL-mask.offsetWidth/2; var y=currentY-marginT-mask.offsetHeight/2; //Set the moving area for the focus box if(x<0){x=0;} if(x>small.offsetWidth-mask.offsetWidth){x=small.offsetWidth-mask.offsetWidth}; if(y<0){y=0;} if(y>small.offsetHeight-mask.offsetHeight){y=small.offsetHeight-mask.offsetHeight}; mask.style.left=x+"px"; mask.style.top=y+"px"; //Set the content displayed in the large box var relativeX=mask.offsetLeft; var relativeY=mask.offsetTop; var relativeY=mask.offsetTop; var proporationX=pic.offsetWidth/small.offsetWidth; var proporationY=pic.offsetHeight/small.offsetWidth; pic.style.marginLeft=-relativeX*proporationX+"px"; pic.style.marginTop=-relativeY*proporationY+"px"; }</script>The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.