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 相关文章推荐
js 自动播放的实例代码
Nov 19 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
laypage分页控件使用实例详解
May 19 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
webpack实用小功能介绍
Jan 02 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
js实现点击烟花特效
Oct 14 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 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
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
分享PHP守护进程类
2015/12/30 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
javascript 中关于array的常用方法详解
2017/05/05 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
vue实现防抖的实例代码
2021/01/11 Vue.js
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
keras之权重初始化方式
2020/05/21 Python
keras中的卷积层&池化层的用法
2020/05/22 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
毕业生学校推荐信范文
2014/05/21 职场文书
应届生求职信
2014/05/31 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
继承权公证书范本
2015/01/23 职场文书
2015年端午节活动总结
2015/02/11 职场文书
给病人的慰问信
2015/03/23 职场文书
毕业论文致谢范文
2015/05/14 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
教你用python实现12306余票查询
2021/06/30 Python
德生2P3收音机开箱评测
2022/04/30 无线电
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript