Js mouse follow motion effect, js mouse follow motion

Js mouse follow motion effect, js mouse follow motion

The examples in this article share with you the code for displaying the Javascript mouse-following effect for your reference. The details are as follows:

1. Use the command to create the basic structure ul. cursorPlay # cursorPlay> li * 12> a> img + div> span
2. Add fields to the span tag
3. Set basic styles

• CursorPlay is 992px in width and 600px in height.
• The cursorPlay li background is white, the inner margin is 8 PX, and the inner margin is 5 PX. The float is displayed as the left float.
• CursorPlay li a, cursorPlay li a img is displayed as a block and relative Layout
• Add overflow: hidden to cursorPlay li
• CursorPlay li a div is an absolute layout, the width and height are both 100%, set the background color to rgba
  

4. Add dynamic effects to js (direction 0, 1, 2, and 3 are respectively top, right, bottom, left)

1. Events for mouse binding

$("#cursorPlay li").on("mouseenter mouseleave",function(event){var evType = event.type;var direction = getDir($(this), {x: event.pageX,y: event.pageY});//  console.log("evtype:"+evType+",dir:"+direction);moveTo($(this),direction, evType);});

2. Use getDir to get the coordinates of the mouse movement.

Calculate the cursor and draw the direction function (the search keyword "jquery calculation mouse and draw the direction ")

direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;function getDir($el, coordinates){var w = $el.width(),h = $el.height(),x = (coordinates.x - $el.offset().left - (w / 2)) * (w > h ? (h / w) : 1),y = (coordinates.y - $el.offset().top - (h / 2)) * (h > w ? (w / h) : 1),direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;return direction;}

3. Add the mobile function moveTo.The three parameters are selector, direction, and draw type respectively. By judging the type, you can customize the initial position of the selector and then redefine the css style, when the cursor is drawn, the positions in each direction are redefined.

function moveTo($el, direction, type){  var $layer = $el.find("div");  var coord = {};  if(type === "mouseenter"){    switch(direction){     case 0 :   $layer.css("top","-100%").css("left","0px");break;    case 1 : $layer.css("left","100%").css("top","0px");break;    case 2 : $layer.css("top","100%").css("left","0px");break;    case 3 : $layer.css("left","-100%").css("top","0px");break;  }    coord = {left:0,top:0}  }else{  switch(direction){    case 0 : coord = {left:0,top:'-100%'};break;    case 1 : coord = {left:'100%',top:0};break;    case 2 : coord = {left:0,top:'100%'};break;    case 3 : coord = {left:'-100%',top:0};break;  }}$layer.animate(coord,300);} 

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.