Js: compile a simple code for product amplification, and js Code for amplification.

Js: compile a simple code for product amplification, and js Code for amplification.

A product display area is often displayed on the product page of a shopping website. A function of this graphic area is to enlarge the product image. You can move the focus area on the left to enlarge the details for viewing, as shown in. The method for implementing this function is also very simple.

 

Lab: create a product focus zoom-in diagram.

Required skills:

1. Basic Methods for getting page elements;
2. Several Simple events;
3. the dom is used to set the attributes of the element;
Case principle:

1. The mouse event following the focus frame;
2. Rules on moving areas in the focus frame;
3. display of large box content;
Target Audience: js beginners

------------------------------------------------------------------- Start! -------------------------------------------------------------
I. First, we should prepare CSS styles. The following points should be noted in CSS styles:
(1) Relative positioning of the focus chart; default value: display: none;
(2) The Box (hereinafter referred to as the big picture box) with a big picture displayed on the right is displayed as "display: none" by default; the content in the big picture box must hide overflow: hidden after the box overflows;

Ii. Start writing script code:
(1) first obtain the page elements:

// The element function getId (tag) {// defines a method for retrieving elements with id, which reduces the 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]; // The element is obtained through the node method.

(2) Two events will occur when you move the mouse over a small chart: 1) the focus box is displayed; 2) the big picture box is displayed. In the same way, the two false events need to be canceled after the mouse is removed.

// Two small effects are displayed when you move the cursor over the image. 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 frame is set to be followed at any time, the following time occurs in fact, so the event type here is not onmouseover, but onmousemove;
2) The main problems involved in this Code are the positioning and computing problems of a mask (Focus box). The problem that is easy to ignore is that the position of the mask moves relative to who? In my css style, the mask is placed in the small box, so the relative movement must be the position of the parent element small it has located. Therefore, the coordinates obtained by clientX and clientY cannot be used directly relative to the current window position of the browser. The effect of the margin value of the parent box must be subtracted.

// Set the focus frame of the thumbnail and follow the mouse; small. onmousemove = function (e) {var marginL = box. offsetLeft; // use the offsetLeft method to obtain the margin-left var marginT = box of the box. offsetTop; // use the offsetTop method to obtain the margin-top var currentX = e. clientX; var currentY = e. clientY; // use e. clientX and e. the position of 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 frame with the mouse, you also need to subtract half of the width and height of the Focus frame/-------------------- other code will be inserted here later/-----------------------/mask. style. left = x + "px"; mask. style. top = y + "px"; // change the focus frame position

(4) Move the idle focus Frame
1) after the previous step is completed, the focus box is moved without any idle resources. During our browsing of the shopping website, we can clearly feel that the focus box does not allow moving the thumbnail, poor user experience;
2) to limit the movement of the Focus box, mainly when the x and y changes exceed the allowed value, give it a fixed value;

// Set the focus frame of the thumbnail 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 move 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 for positioning is 0, and the maximum value is the length of small-the length of the mask y axis. Similarly, 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 of the mask is written after the specified moving area. Note that the execution sequence of the Code is mask. style. top = y + "px ";

(5) set the display of a large image.
1) to move an image in the big box, you should think of the-margin value;
2) how much distance can be moved by a fixed proportion multiplied by the left and top values of the mask. Think about the position displayed in the upper left corner of the focus area and in the upper left corner of the big image box !!! This is not hard to understand.

// Set var relativeX = mask. offsetLeft; var relativeY = mask. offsetTop; var proporationX = pic. offsetWidth/small. offsetWidth; // sets the ratio var proporationY = pic. offsetHeight/small. offsetWidth; pic. style. marginLeft =-relativeX * proporationX + "px"; // note! The value of margin must be a negative value. "Do not discard the pic. style. marginTop =-relativeY * proporationY +" px ";

In this step, our demo is complete! Is it easy?
Next I will paste the entire code and hope to discuss it 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">    <div id="mask"></div> </div> <div id="big">   </div></div>

Here is the js Code

<Script> // The 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); // two small effects appear when you move the cursor over the image. 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 thumbnail, following 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 move 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 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 for your learning and support for helping customers.