脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 鼠标跟随效果

原生js实现鼠标跟随效果

 更新时间：2017年02月28日 10:24:43   作者：chang红达  
本文主要分享了原生js实现鼠标跟随效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧

话不多说，请看代码：

<!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中的constructor

    深入浅析JavaScript中的constructor

    constructor 属性返回对创建此对象的数组函数的引用。本文给大家介绍JavaScript中的constructor ，需要的朋友参考下吧
    2016-04-04
  • JS实现样式清新的横排下拉菜单效果

    JS实现样式清新的横排下拉菜单效果

    这篇文章主要介绍了JS实现样式清新的横排下拉菜单效果,通过简单的元素遍历控制页面元素的动态切换效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 总结分享10 个超棒的 JavaScript 简写技巧

    总结分享10 个超棒的 JavaScript 简写技巧

    这篇文章主要总结分享10 个超棒的 JavaScript 简写技巧，有合并数组、克隆数组、解构赋值、模板字面量等技巧，需要的朋友可以参考一下
    2022-06-06
  • JavaScript实现为事件句柄绑定监听函数的方法分析

    JavaScript实现为事件句柄绑定监听函数的方法分析

    这篇文章主要介绍了JavaScript实现为事件句柄绑定监听函数的方法,结合实例形式分析了javascript事件绑定的常用技巧与注意事项,需要的朋友可以参考下
    2017-11-11
  • Java前后端分离之权限管理示例分析

    Java前后端分离之权限管理示例分析

    权限管理就是管理用户对于资源的操作。本 CRM 系统的权限（也称作资源）是基于角色操作权限来实现的，即RBAC（Role-Based Access Control，基于角色的访问控制），就是用户通过角色与权限进行关联
    2022-08-08
  • openlayers实现地图测距测面

    openlayers实现地图测距测面

    这篇文章主要为大家详细介绍了openlayers实现地图测距测面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 三种Webpack打包方式(小结)

    三种Webpack打包方式(小结)

    这篇文章主要介绍了三种Webpack打包方式(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • js判断登陆用户名及密码是否为空的简单实例

    js判断登陆用户名及密码是否为空的简单实例

    下面小编就为大家带来一篇js判断登陆用户名及密码是否为空的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • canvas快速绘制圆形、三角形、矩形、多边形方法介绍

    canvas快速绘制圆形、三角形、矩形、多边形方法介绍

    本文主要介绍了使用canvas来绘制常见的各种图形实例，并且会简单封装一下绘制各图形的方法，最后会分享给大家一个封装好的快速绘制多边形的方法。下面跟着小编一起来看下吧
    2016-12-12
  • D3.js实现饼状图的方法详解

    D3.js实现饼状图的方法详解

    相信大家都知道图表是数据图形化的表示，通过形象的图表来展示数据，比如条形图，折线图，饼图等。可视化图表可以帮助开发者更容易理解复杂的数据，提高生产的效率和Web应用和项目的可靠性。现在就让我们大家一起来学习用D3.js来实现饼图的方法，有需要的可以参考借鉴。
    2016-09-09

最新评论