原生js实现鼠标跟随效果


Posted in Javascript onFebruary 28, 2017

话不多说,请看代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>鼠标跟随效果</title>
 <style type="text/css">
 *{margin: 0;padding: 0;}
 img{position:absolute;top:0;left:0;}
 </style>
</head>
<body>
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=21984166dad229792b21c2e1277bece5" height="50" width="50" alt="" id="img">
</body>
<script type="text/javascript">
 (function(window){
 // 获取对象
 var img = document.getElementById("img");
 // 为页面添加单击事件,鼠标点击时图片滑动到鼠标所在位置
 document.onclick = function(event){
  var event = event || window.event;
  // 获取鼠标在页面上的坐标
  var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
  var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
  // 减去图片自身宽高的一半,使鼠标在图片中间
  pageX = pageX - img.offsetWidth/2;
  pageY = pageY - img.offsetWidth/2;
  animate(img,{"left":pageX,"top":pageY});
 };
 // 封装缓动函数
 function animate(obj,json,fn){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
  var flog = true ;
  for( k in json ){
   if( k === "zindex" ){
   obj.style[k] = json[k];
   }else if( k === "opacity" ){
   var leader = getStyle(obj,k) * 100;
   var target = json[k] * 100;
   var step = ( target - leader ) / 10 ;
   step = step > 0 ? Math.ceil( step ) : Math.floor( step );
   leader = leader + step ;
   obj.style[k] = leader / 100;
   }else{
   var leader = parseInt( getStyle(obj,k) );
   var target = json[k];
   var step = ( target - leader) / 10 ;
   step = step > 0 ? Math.ceil( step ) : Math.floor( step );
   leader = leader + step;
   obj.style[k] = leader + "px";
   };
   if( leader !== target ){
   flog = false;
   }
  }
  if( flog ){
   clearInterval(obj.timer);
   if( fn ){
   fn();
   };
  };
  }, 15)
 };
 // 封装获取计算后样式的函数
 function getStyle(obj,attr){
  if( window.getComputedStyle ){
  return window.getComputedStyle(obj,null)[attr];
  }else{
  return obj.currentStyle[attr];
  };
 };
 })(window)
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
原生js的数组除重复简单实例
May 24 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
vue写一个组件
Apr 09 Javascript
canvas实现简易的圆环进度条效果
Feb 28 #Javascript
JS实现的tab切换选项卡效果示例
Feb 28 #Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 #Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 #Javascript
canvas红包照片实例分享
Feb 28 #Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 #Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 #Javascript
You might like
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
php5.2.0内存管理改进
2007/01/22 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
初步探究Python程序的执行原理
2015/04/11 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
Python温度转换实例分析
2018/01/17 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
python匿名函数用法实例分析
2019/08/03 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
使用K.function()调试keras操作
2020/06/17 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
通用C#笔试题附答案
2016/11/26 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
小区停车场管理制度
2014/01/27 职场文书
中学自我评价
2014/01/31 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
个人承诺书怎么写
2014/05/24 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript
解决MySQL报“too many connections“错误
2022/04/19 MySQL
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers