js鼠标跟随运动效果


Posted in Javascript onMarch 11, 2017

本文实例为大家分享了js鼠标跟随效果展示的具体代码,供大家参考,具体内容如下

1、使用命令创建基本结构ul.cursorPlay#cursorPlay>li*12>a>img+div>span
2、给span标签添加字段
3、设置基本的样式

  • cursorPlay的宽度 992px,高度600px
  • cursorPlay li背景为白色,内边距为8px,外边距5px,显示浮动为左浮动
  • cursorPlay li a,cursorPlay li a img显示为块状并且为相对布局
  • cursorPlay li a添加overflow:hidden
  • 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、使用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 Validation实例代码 让验证变得如此容易
Oct 18 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
将list转换为json失败的原因
Dec 17 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 #Javascript
基于Node.js的WebSocket通信实现
Mar 11 #Javascript
js原生Ajax的封装和原理详解
Mar 11 #Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 #Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 #Javascript
基于Bootstrap框架实现图片切换
Mar 10 #Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 #Javascript
You might like
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
javascript实现拖放效果
2015/12/16 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
python 字符串格式化代码
2013/03/17 Python
Python yield 小结和实例
2014/04/25 Python
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
Python格式化日期时间操作示例
2018/06/28 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
高中生毕业学习总结的自我评价
2013/11/14 职场文书
大学生演讲稿范文
2014/01/11 职场文书
户外婚礼策划方案
2014/02/08 职场文书
2014高考励志标语
2014/06/05 职场文书
学校春季防火方案
2014/06/08 职场文书
应届生找工作求职信
2014/06/24 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
学校运动会广播稿
2014/10/11 职场文书
小学运动会开幕词
2015/01/28 职场文书