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 性能优化手册 推荐
Feb 23 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
javascript如何写热点图
Dec 08 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
详解Vue底部导航栏组件
May 02 Javascript
js回调函数原理与用法案例分析
Mar 04 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
yii操作session实例简介
2014/07/31 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
javascript网页关键字高亮代码
2008/07/30 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
js数组操作学习总结
2013/11/04 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
怎么使用pipenv管理你的python项目
2018/03/12 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
物理系毕业生自荐信
2013/11/01 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2014年店长工作总结
2014/11/17 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技