js实现鼠标跟随运动效果


Posted in Javascript onAugust 02, 2020

鼠标跟随运动效果展示

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获取鼠标移动的方向,coordinates坐标

计算鼠标划入画出方向函数(搜索关键词“jquery计算鼠标划入划出方向”)

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)、添加移动函数moveTo,三个参数分别为选择器,方向,鼠标划入画出类型,通过判断鼠标划入类型,来自定义选择器初始位置,然后重定义css样式,当鼠标划出时再重定义每个方向上的位置

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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
vue获取当前激活路由的方法
Mar 17 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 #Javascript
javascript观察者模式实现自动刷新效果
Sep 05 #Javascript
js使用generator函数同步执行ajax任务
Sep 05 #Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 #Javascript
详解Vue2.0 事件派发与接收
Sep 05 #Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 #Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 #jQuery
You might like
PHP合并数组的2种方法小结
2016/11/24 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP递归算法的简单实例
2019/02/28 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
原生JS实现首页进度加载动画
2016/09/14 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
在pycharm中实现删除bookmark
2020/02/14 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
党员思想汇报范文
2013/12/30 职场文书
股权投资意向书
2014/04/01 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
消防志愿者活动方案
2014/08/23 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
小学教师见习总结
2015/06/23 职场文书
高中地理教学反思
2016/02/19 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers