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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
任意位置显示html菜单
Feb 01 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 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 类相关函数的使用详解
2013/05/10 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php数组去除空值函数分享
2015/02/02 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
自荐信结尾
2013/10/27 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
成人继续教育实施方案
2014/03/01 职场文书
初中教师业务学习材料
2014/05/12 职场文书
民事和解协议书格式
2014/11/29 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript