JS to write a simple product amplification effect Code _javascript Tips

The product page of the shopping site often has a product map area. The plot area has a function is the product map amplification function, moving the focus area on the left, you can enlarge the details of the view, details as shown below. The method of implementing this feature is also very simple.

Experiment: Make the product focus enlarge the chart.

Required Skills:

1, the basic method of acquiring page elements;
2, a few simple events;
3, will use the DOM to set the attributes of the element;
Case THEORY:

1, the Focus box following the mouse event;
2, the focus of the mobile regional regulations;
3, the large box content display;
Suitable object: JS Beginners

-------------------------------------------------------------------start! -------------------------------------------------------------
First, we prepare CSS styles, CSS styles need to pay attention to a few points are:
(1) Focus map relative positioning, default display:none;
(2) The box with large picture on the right side (hereinafter referred to as large frame) defaults to Display:none; the contents of the large frame box should hide the Overflow:hidden after the box is overflowed;

Second, start writing script code:
(1) Get the page element first:

First of all, perhaps the element
 function GetId (tag) {//define a method to get the element with ID, reduce a lot of work! 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 the method of getting the element through the node

(2) Clear mouse movement to the small image will appear two events: 1 Focus box to come out, 2 large frame to display. After the same mouse removal, these two leave to cancel

The mouse moved to the picture appears two effects
 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 setting the Focus box to follow, our following 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) of the positioning of the problem, easy to ignore the problem is mask is the location of the move? My CSS style mask is placed in the small box, so the relative move position must be the location of the parent element Small it has positioned. So I got it with clientx,clienty. The position coordinates of the current window relative to the browser cannot be used directly, and must be subtracted from the margin value of its parent box.

Set the focus of the small map box, follow the mouse;
 small.onmousemove=function (e) {
  var marginl=box.offsetleft; Use the Offsetleft method to get Box's margin-left
  var margint=box.offsettop;//Use the offsettop method to get box Margin-top
  var currentx=　　　　　　　　　　　　　　　　E.clientx;　　
  var currenty= e.clienty;　　　　　　　　var x=currentx-marginl-mask.offsetwidth/2 using the position of E.clientx and e.clinety relative to the upper-left corner of the browser
  ;
  var y=currenty-margint-mask.offsetheight/2;//To align the center of the focus box to the mouse, you need to subtract the width of the focus box by half
/---------------------- In a moment you will also insert additional code/---------------------------/
  mask.style.left=x+ "px";
  mask.style.top=y+ "px"; Change the position of the focus box

(4) The position of the idle focus box moves
1 after the completion of the implementation of the focus of the box is free of any idle, in our browsing the shopping site, we can obviously feel the focus box does not allow moving small map of the outside, resulting in a bad user experience;
2 to limit the movement of the focus box, mainly x,y changes over the allowable value, give him a fixed value;

Set the focus of the small map box, 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
  if (x<0) {x=0}
  to the Focus box　　　　　if (x>small.offsetwidth-mask.offsetwidth)
{x=small.offsetwidth-mask.offsetwidth}; The minimum value for locating x is 0, the maximum value is the length of the small length-mask the y axis of the same
  if (y<0) {y=0;}
  if (y>small.offsetheight-mask.offsetheight)
{y=small.offsetheight-mask.offsetheight};
  mask.style.left=x+ "px"; Pay attention to the moving area after the specified move area, pay attention to the execution order of the Code
  mask.style.top=y+ "px";

(5) Set up the display of large picture
1 in the big box to achieve the movement of the picture, should think of-margin value;
2 How much distance to move can be multiplied by a fixed ratio of mask's left and top values, think about the position of the upper left corner of the focus area and the upper left-hand corner of the large picture frame to show the same!!! It's not that hard to understand.

Set the contents shown in the large box
  var relativex=mask.offsetleft;
  var relativey=mask.offsettop;
  var proporationx=pic.offsetwidth/small.offsetwidth; Set the proportional
  var proporationy=pic.offsetheight/small.offsetwidth;
  pic.style.marginleft=-relativex*proporationx+ "px"; Attention! Margin value must be negative, "px do not lose
  pic.style.margintop=-relativey*proporationy+" px ";

To this step of our demo will be done! Is it simple?
Below I paste the entire code out, hoped can discuss the exchange with everybody.

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, 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>

This 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>//First perhaps the element function to be manipulated 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 moved to the picture appears two effects 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 frame of the small map, 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 if (x<0) {x=0} to the Focus box
  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 big 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 the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.