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 相关文章推荐
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 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自动生成表单代码分享
2015/06/19 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
js实现select下拉框选择
2020/01/11 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
Python中函数参数调用方式分析
2018/08/09 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
组工干部对照检查材料
2014/08/25 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS