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

This article Xiaobian for you to introduce in detail "jQuery how to achieve div to follow the mouse movement", the content is detailed, the steps are clear, the details are handled properly, I hope this "jQuery how to achieve div to follow the mouse movement" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

The key point is to figure out how to get the current position of the mouse and the position after moving, and the current position and the position after moving the div:

Use jQuery to realize that div moves with the mouse, not the position of the mouse itself! It's the movement of the div relative to its previous position.

The code is as follows: (note the explanation of the green part)

.aa {height: 100px; width: 200px; position: absolute; background-color: green;} $(".aa") .mousedown (function (e) {/ / sets the default location var endx=0; var endy=0 after moving / / get the initial position of div. Note that you need to convert the integer type, because you get the value with px var left= parseInt ($(".aa"). Css ("left")); var top = parseInt ($(".aa"). Css ("top")); / / get the coordinates when the mouse is pressed, which is different from the following es.pageX,es.pageY var downx=e.pageX; var downy=e.pageY / / pageY's y must be capitalized! / hang event $(".aa") to div when mouse is pressed. Bind ("mousemove", function (es) {/ / es.pageX,es.pageY: get the coordinates after mouse movement var endx= es.pageX-downx+left; / / calculate the final position of div var endy=es.pageY-downy+top; / / with the unit $(".aa") .css ("left", endx+ "px") .css ("top", endy+ "px")}) }) $(".aa") .mouseup (function () {/ / cancel the event to div when the mouse pops up $(".aa") .unbind ("mousemove")})

Different from the following code: (the final effect is that the div moves with the mouse position. If you want to see the specific effect, you can paste, copy and compare to see where the gap is.)

$(".aa") .mousedown (function (e) {$(document) .bind ("mousemove", function (e) {$(".aa") .css ("left", e.pageX) .css ("top", e.pageY)}) }) $(".aa") .mouseup (function () {$(document) .unbind ("mousemove")}) read here, this article "jQuery how to achieve div to follow the mouse movement" article has been introduced, want to master the knowledge of this article also need to be hands-on practice to understand, if you want to know more about the article, welcome to 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.