Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "jQuery how to achieve mouse following effect", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "jQuery how to achieve mouse following effect" article.

The sample code is as follows

* {margin:0; padding:0;} img {border:none;} .box {width:660px; position: relative;} .box .mark {position: absolute; width: 400px; height: 300px; display: none;} .box .mark img {width: 100%;} .box img {width: 150px; float: left; margin:5px;}

/ / 1. When you move the mouse into which picture, let its corresponding large image display; / / 2. When the mouse moves in img, the big picture follows; var $box=$ ('.box'); var $aImg=$box.children ('img'); var $mark=$ (' .mark'); var $offset=$box.offset (); $aImg.mouseover (function () {/ / when the mouse moves into each picture, let mark display, and let the img tag in mark, the src attribute value is the value obtained on the realImg attribute of the current picture $mark.show () .find ('img') .attr (' src',$ (this) .attr ('realImg')); $aImg.mousemove (function (e) {/ / take the x coordinate of the mouse, minus the left position of $box from body Var left= e.clientXmurf offset.leftwork10; var top= e.clientYmurfoffset.toproom10; $mark.css ({left:left,top:top})}); $aImg.mouseout (function () {$mark.hide ()) }) the above is the content of this article on "how to achieve mouse following effect in jQuery". I believe you all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about related knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.