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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
Vue中key的作用示例代码详解
Jun 10 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
PHP开发的一些注意点总结
2010/10/12 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
js检测iframe是否加载完成的方法
2015/11/26 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
Python深度优先算法生成迷宫
2018/01/22 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
Python 修改列表中的元素方法
2018/06/26 Python
python中嵌套函数的实操步骤
2019/02/27 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
详解用python生成随机数的几种方法
2019/08/04 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
在职研究生自我鉴定
2013/10/16 职场文书
自荐信结尾
2013/10/27 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
论文评语大全
2014/04/29 职场文书
大专生自荐书范文
2014/06/22 职场文书
教师自查自纠材料
2014/10/14 职场文书
行政前台岗位职责
2015/04/16 职场文书