html实现鼠标跟随,js实现鼠标跟随运动效果

鼠标跟随运动效果展示

1、使用命令创建基本结构ul.cursorPlay#cursorPlay>li*12>a>img+div>span

2、给span标签添加字段

3、设置基本的样式

1、cursorPlay的宽度 992px，高度600px

2、cursorPlay li背景为白色，内边距为8px，外边距5px,显示浮动为左浮动

3、cursorPlay li a,cursorPlay li a img显示为块状并且为相对布局

4、cursorPlay li a添加overflow:hidden

5、cursorPlay li a div为绝对布局，宽度和高度均为100%，设置背景颜色为rgba

4、js添加动态效果(方向0,1,2,3分别为上，右，下，左)

1)、给绑定鼠标进入或者出去的事件

$("#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、

2)、使用getDir获取鼠标移动的方向，co