This effect mainly imitates that of Taobao shopping. When the mouse hovers over the top of the picture, the corresponding amplification module appears, and the corresponding picture information is displayed in the nearby area. It mainly uses the monitoring function of js monitoring mouse in the corresponding area:

• The onmousenter event fires when the mouse pointer moves over an element.
• The onmouseover event occurs when the mouse pointer moves over the specified element.
• Onmousesave event fires when the mouse removes an element
• onmousemove event occurs when the mouse pointer moves

Making process

1. Define objects

  var biger = document.getElementById('biger');
  var main = document.getElementById('main');
  var smaller = document.getElementById('smaller');
  var mask = document.getElementById('mask');
  var wrap = biger.parentNode;
  var imgArr = [
      {"path":"./images/banner1.jpg"},
      {"path":"./images/banner2.jpg"},
      {"path":"./images/banner3.jpg"},
      {"path":"./images/banner4.jpg"},
      {"path":"./images/banner5.jpg"}
  ];
  var imgSum = imgArr.length;
  if(imgSum > 5){
      imgSum = 5;
  }

2. Generate Dom elements and display picture information

insertBefore(_newnode,_existingnode)

• InsertBefore ("newnode", "existingnode") method inserts a new child node before the existing child node you specify
• Tip: if you want to create a new list item that contains text, remember to create text in the form of a text node to append to the LI element, and then insert the LI into the list.
• _newnode: required. Node object to insert.
• _existingnode: optional. Inserts a child of the new node before it. If not specified, the insertBefore method inserts a newnode at the end.

You can also use the insertBefore method to insert / move existing elements.

for (var i = 0; i<imgSum; i++){
      var  lis = document.createElement('li');
      var  imgs = document.createElement('img');
      imgs.src = imgArr[i].path;
      lis.appendChild(imgs);
      smaller.appendChild(lis);
  }
  var mainImg = document.createElement('img');
  var bigImg = document.createElement('img');
  var liArr = smaller.children;
  bigImg.src = mainImg.src = liArr[0].children[0].src;
  main.insertBefore(mainImg,mask);
  biger.appendChild(bigImg);

3. Click event to switch picture information

removeAttribute()

• The removeaattribute() method deletes the specified attribute.
• The difference between this method and the removeaattributenode() method is that the removeaattributenode() method deletes the specified Attr object and this method deletes the attribute with the specified name. The results are the same. At the same time, this method does not return a value, while the removeaattributenode() method returns the deleted attribute in the form of an Attr object.

 var bigPic = biger.children[0];
  liArr[0].className = 'current';
  for (var i=0; i<liArr.length;i++){
      liArr[i].index = i;
      liArr[i].onclick = function () {
          this.className = 'current';
          bigPic.src = main.children[0].src = this.children[0].src;
          for (var j = 0; j < liArr.length; j++) {
              if(this!=liArr[j]){
                  liArr[j].removeAttribute('class');
                  liArr[j].removeAttribute('className');
              }
          }
      }
  }

4. Monitor the mouse movement and display the amplification effect

  main.onmouseenter = function () {
      mask.style.display = 'block';
      biger.style.display = 'block';
  }
    main.onmouseleave=function(){
        mask.style.display='none';
        biger.style.display='none';
    }
  main.onmousemove = function (e) {
      var e = e || window.event;
      var pagex = e.pageX || scroll().left + e.clientX;
      var pagey = e.pageY || scroll().top + e.clientY;
      pagex = pagex - wrap.offsetLeft - mask.offsetWidth / 2;
      pagey = pagey - wrap.offsetTop - mask.offsetHeight / 2 ;
      if(pagex<0){
          pagex=0;
      }
      if(pagey<0){
          pagey=0;
      }
      if(pagex>main.offsetWidth-mask.offsetWidth){
          pagex=main.offsetWidth-mask.offsetWidth;
      }
      if(pagey>main.offsetHeight-mask.offsetHeight){
          pagey=main.offsetHeight-mask.offsetHeight;
      }
      mask.style.left=pagex+'px';
      mask.style.top=pagey+'px';
      var scale=(bigPic.offsetWidth-biger.offsetWidth)/(main.offsetWidth-mask.offsetWidth);
      var xx=pagex*scale;
      var yy=pagey*scale;
      bigPic.style.left=-xx+'px';
      bigPic.style.top=-yy+'px';
  }

Get the mouse displacement point (x, y)

  var pagex = e.pageX || scroll().left + e.clientX;
      var pagey = e.pageY || scroll().top + e.clientY;
      pagex = pagex - wrap.offsetLeft - mask.offsetWidth / 2;
      pagey = pagey - wrap.offsetTop - mask.offsetHeight / 2 ;

Set the moving range, not allowed to exceed the picture part

if(pagex<0){
          pagex=0;
      }
      if(pagey<0){
          pagey=0;
      }
      if(pagex>main.offsetWidth-mask.offsetWidth){
          pagex=main.offsetWidth-mask.offsetWidth;
      }
      if(pagey>main.offsetHeight-mask.offsetHeight){
          pagey=main.offsetHeight-mask.offsetHeight;
      }

Set magnification area: move the position of the enlarged picture (top,left)

  mask.style.left=pagex+'px';
      mask.style.top=pagey+'px';
      var scale=(bigPic.offsetWidth-biger.offsetWidth)/(main.offsetWidth-mask.offsetWidth);
      var xx=pagex*scale;
      var yy=pagey*scale;
      bigPic.style.left=-xx+'px';
      bigPic.style.top=-yy+'px';

js source code

window.onload = function () {
  var biger = document.getElementById('biger');
  var main = document.getElementById('main');
  var smaller = document.getElementById('smaller');
  var mask = document.getElementById('mask');
  var wrap = biger.parentNode;
  var imgArr = [
      {"path":"./images/banner1.jpg"},
      {"path":"./images/banner2.jpg"},
      {"path":"./images/banner3.jpg"},
      {"path":"./images/banner4.jpg"},
      {"path":"./images/banner5.jpg"}
  ];
  var imgSum = imgArr.length;
  if(imgSum > 5){
      imgSum = 5;
  }
  for (var i = 0; i<imgSum; i++){
      var  lis = document.createElement('li');
      var  imgs = document.createElement('img');
      imgs.src = imgArr[i].path;
      lis.appendChild(imgs);
      smaller.appendChild(lis);
  }
  var mainImg = document.createElement('img');
  var bigImg = document.createElement('img');
  var liArr = smaller.children;
  bigImg.src = mainImg.src = liArr[0].children[0].src;
  main.insertBefore(mainImg,mask);
  biger.appendChild(bigImg);
  var bigPic = biger.children[0];
  liArr[0].className = 'current';
  for (var i=0; i<liArr.length;i++){
      liArr[i].index = i;
      liArr[i].onclick = function () {
          this.className = 'current';
          bigPic.src = main.children[0].src = this.children[0].src;
          for (var j = 0; j < liArr.length; j++) {
              if(this!=liArr[j]){
                  liArr[j].removeAttribute('class');
                  liArr[j].removeAttribute('className');
              }
          }
      }
  }
  main.onmouseenter = function () {
      mask.style.display = 'block';
      biger.style.display = 'block';
  }
    main.onmouseleave=function(){
        mask.style.display='none';
        biger.style.display='none';
    }
  main.onmousemove = function (e) {
      var e = e || window.event;
      var pagex = e.pageX || scroll().left + e.clientX;
      var pagey = e.pageY || scroll().top + e.clientY;
      pagex = pagex - wrap.offsetLeft - mask.offsetWidth / 2;
      pagey = pagey - wrap.offsetTop - mask.offsetHeight / 2 ;
      if(pagex<0){
          pagex=0;
      }
      if(pagey<0){
          pagey=0;
      }
      if(pagex>main.offsetWidth-mask.offsetWidth){
          pagex=main.offsetWidth-mask.offsetWidth;
      }
      if(pagey>main.offsetHeight-mask.offsetHeight){
          pagey=main.offsetHeight-mask.offsetHeight;
      }
      mask.style.left=pagex+'px';
      mask.style.top=pagey+'px';
      var scale=(bigPic.offsetWidth-biger.offsetWidth)/(main.offsetWidth-mask.offsetWidth);
      var xx=pagex*scale;
      var yy=pagey*scale;
      bigPic.style.left=-xx+'px';
      bigPic.style.top=-yy+'px';
  }
};

This article is mainly for simulation development after seeing the page effect on Taobao. The main points are the monitoring event of the mouse and the setting of the position of the display module. I hope this article will be helpful to you, and I like it a lot. Thank you! github address