The final version of the picture with the mouse fly: JS --- Case

Case: The final version of the picture with the mouse to fly

Candy for a good-looking picture, want to add to the blog home page, but after add, should be overwrite the original html, so the light has to follow the mouse flying effect, the original function can be used not

Put common.js

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>

  <style>
    img {
      position: absolute;
    }
  </style>
</head>

<body>
  <img
    src= "https://images.cnblogs.com/cnblogs_com/jane-panyiyun/1620008/t_191224122527%E5%9C%A3%E8%AF%9E%E7%B3%96%E6%9E%9C.png?a= 1577190334776 " 
    Alt =" " ID =" IM "  /> 
  < Script the src =" common.js " > </ Script > 
  < Script > 
    var EVT = {
       // the window.event and event argument object compatible e 
      getEvent: function ( EVT) {
         return the window.event || EVT; 
      }, 
      // abscissa visible region code compatible 
      getClientX:function (evt) {
        return the this .getEvent (EVT) .clientX; 
      }, 
      // ordinate visible region code compatible 
      getClientY: function (EVT) {
         return  the this .getEvent (EVT) .clientY; 
      }, 
      // page curl out of the left lateral coordinates 
      getScrollLeft: function () {
         return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft ||  0 ; 
      }, 
      // page curl upwardly out ordinate 
      getScrollTop: function () {
         return window.pageYOffset ||document.body.scrollTop || document.documentElement.scrollTop ||  0 ; 
      }, 
      // with respect to the abscissa of the page (or the pageX + the scrollLeft the clientX) 
      getPageX: function (EVT) {
         return  the this .getEvent (EVT) .pageX ?  the this .getEvent (EVT) .pageX: the this .getClientX (EVT) +  the this .getScrollLeft (); 
      }, 
      // with respect to the vertical axis of the page (or pageY + scrollTop clientY) 
      getPageY: function (EVT) {
         return  the this .getEvent (evt) .pageY ?  the this .getEvent (evt) .pageY:this.getClientY(evt) + this.getScrollTop();
      }
    };
    //最终的代码

    document.onmousemove = function (e) {
      my$("im").style.left = evt.getPageX(e) + "px";
      my$("im").style.top = evt.getPageY(e) + "px";
    };

  </script>
</body>

</html>

The final version of the picture with the mouse fly: JS --- Case

Case: The final version of the picture with the mouse to fly

Guess you like