js实现跟随鼠标移动的小球

 更新时间:2019年08月26日 09:05:53   作者:Vam的金豆之路  
这篇文章主要为大家详细介绍了js实现跟随鼠标移动的小球,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

<!DOCTYPE html>
<html>
<head>
  <title>follow mouse</title>
</head>
<style type="text/css">
  *{
    margin: 0;
    padding:0;
  }
  #div1{width: 50px;height: 50px;background: red;color:#fff;text-align: center;line-height: 50px; position: absolute;transition: all 0.5s; }
  #div2{width: 50px;height: 50px;background: green;color:#fff;text-align: center;line-height: 50px;position:
  absolute;transition: all 0.5s; }

  .box1{
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
  }
  .box2{
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
    }
</style>

<body>
  <div class="box1" onmousemove="b1()">
    <div id="div1" >1</div>
  </div>
  <div class="box2" onmousemove="b2()">
    <div id="div2">2</div>
  </div>
</body>
<script type="text/javascript">
  function b1(ev) {
    var oEvent = ev || event;
    var oDiv = document.getElementById('div1');
    if( oEvent.clientX<350&&oEvent.clientY<350){
    oDiv.style.left = oEvent.clientX + 'px';
    oDiv.style.top = oEvent.clientY + 'px';
    }

  }
  function b2(ev){
    var oEvent=ev||event;
    var oDiv=document.getElementById('div2');
    if( oEvent.clientX<350&&oEvent.clientY<750){
      oDiv.style.left=oEvent.clientX+'px';
      oDiv.style.top=oEvent.clientY+'px';
    }
  }
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Webpack中的文件指纹的实现

    Webpack中的文件指纹的实现

    本文主要介绍了Webpack中的文件指纹的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 详解单页面路由工程使用微信分享及二次分享解决方案

    详解单页面路由工程使用微信分享及二次分享解决方案

    这篇文章主要介绍了详解单页面路由工程使用微信分享及二次分享解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • javascript 拽拉效果 供JS初学者学习参考

    javascript 拽拉效果 供JS初学者学习参考

    超精简的拽拉效果JS,并且还是同时支持IE和FF。 可以给与其他刚开始学习JS的朋友作为参考和学习。
    2008-07-07
  • 如何为你的JS项目添加智能提示与类型检查详解

    如何为你的JS项目添加智能提示与类型检查详解

    这篇文章主要给大家介绍了关于如何为你的JS项目添加智能提示与类型检查的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • JSON与js对象序列化实例详解

    JSON与js对象序列化实例详解

    这篇文章主要介绍了JSON与js对象序列化,结合实例形式详细分析了JavaScript与JSON序列化操作的相关实现技巧与注意事项,需要的朋友可以参考下
    2017-03-03
  • 基于JavaScript的数据结构队列动画实现示例解析

    基于JavaScript的数据结构队列动画实现示例解析

    这篇文章主要介绍了基于JavaScript的数据结构队列动画实现示例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 如何将JS的变量值传递给ASP变量

    如何将JS的变量值传递给ASP变量

    asp作为主页面,外接一个js的,我想知道一下能否在js里面调用asp的变量值,如果能这些值是怎么传递过去的呢?本文将提供解决方法,需要的朋友可以参考下
    2012-12-12
  • 在JavaScript中使用严格模式(Strict Mode)

    在JavaScript中使用严格模式(Strict Mode)

    这篇文章主要介绍了在JavaScript中使用严格模式(Strict Mode),除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。,需要的朋友可以参考下
    2019-06-06
  • JS实现电脑虚拟键盘打字测试

    JS实现电脑虚拟键盘打字测试

    这篇文章主要为大家详细介绍了JS实现电脑虚拟键盘打字测试,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • JS实现移动端点击按钮复制文本内容

    JS实现移动端点击按钮复制文本内容

    本文通过实例代码给大家介绍了移动端点击按钮复制文本内容 ,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07

最新评论