jQuery realizes the picture following effect

This article shares the specific code of jQuery to achieve the picture following effect for your reference. The specific content is as follows

Achieve results

Functions to be implemented:

* When the mouse comes in, a large picture will be displayed;
* Move the mouse out to hide the large image;
* Move the mouse inside the big picture, and the big picture will move along with it.

Code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
 body {
  text-align: center;
 }
 #small {
  margin-top: 150px;
 }
 #showBig {
  position: absolute;
  display: none;
 }
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
 /*
 * Functions to be implemented:
 * When the mouse comes in, a large picture will be displayed;
 * Move the mouse out to hide the large image;
 * Move the mouse inside the big picture, and the big picture will move along with it.
  */
 $(function(){

     /*
     * When the mouse enters or leaves, show or hide the large image*
     */
     //Bind events to small images$("#small").bind("mouseover mouseout mousemove",function (event) {
            /*
    * If the mouse is moved out, the large image disappears;
    * Mouse over to display the large image.
             */
         if(event.type == "mouseover"){
             $("#showBig").show();
   } else if (event.type == "mouseout"){
             $("#showBig").hide();
   } else if(event.type == "mousemove"){
             console.log(event);
                $("#showBig").offset({
                    left: event.pageX + 10,
     top: event.pageY + 10
     /*
     * Originally, the mouse is in the upper left corner of the large image, but a problem will occur: when the mouse moves from the upper left corner of the small image to the lower right corner, the mouse will first leave the area of the large image and be judged as mouseout, so the large image should be hidden;
     * Later, it was discovered that the area below was actually the small picture area, which was judged as nouseover, and the large picture was displayed again.
     * ----> Will cause the page to change too quickly* ==> Solution: Place the mouse outside the large image, at a certain distance from the upper left corner of the large image.
     * When the mouse moves from the upper left corner of the small picture to the lower right corner, the above situation will be avoided. * Because, as long as the mouse is still within the range of the small picture, the large picture will not block the small picture where the mouse will reach the next moment. */
    });
   }

        });

 });
</script>
</head>
<body>

 <img id="small" src="img/small.jpg" />
 
 <div id="showBig">
  <img src="img/big.jpg">
 </div>

</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: