<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <meta name="author" content="郭菊锋/702004176@qq.com"/>

         <style type="text/css">

             .div {

                 display: none;

                 position: absolute;

                 width: 30px;

                 height: 30px;

                 margin: -15px 0 0 -15px;

                 background: rgba(37, 0, 255, 0.3);

                 -webkit-border-radius: 50%;

                 -moz-border-radius: 50%;

                 border-radius: 50%;

             }

         </style>

     </head>

     <body>

         <div id="div" class="div">

         </div>

     </body>

 </html>

 <script type="text/javascript">

     window.onload = function() {

         var oDiv = document.getElementById("div");

         window.onmousemove = function(ev) {

             var ev = ev || window.event;

             var ofLeft = document.documentElement.offsetLeft || document.body.offsetLeft;

             var ofTop = document.documentElement.offsetTop || document.body.offsetTop;

             var oLeft = ev.clientX + ofLeft;

             var oTop = ev.clientY + ofTop;

             oDiv.style.display = "block";

             oDiv.style.left = oLeft + "px";

             oDiv.style.top = oTop +　"px";

         }

     }

 </script>

JS-鼠标跟随块（一个小圆点跟着鼠标跑）的更多相关文章

  1. js 小野人跟着鼠标移动

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. 鼠标经过导航中li时，一个彩色模块跟着鼠标移动

    1.鼠标经过导航中li时,一个活动的li跟随鼠标移动,最终移动到鼠标的停留的位置.(如需鼠标离开后让活动的li回到初始位置,则用jq hover事件,当鼠标离开时,给活动的li设置left是0) 2. ...

  3. 关于js中 toFixed()的一个小坑

    作为一名前端,大家都应该知道,toFixed()的作用,toFixed()经常用于前台与后台数据格式的转换,套用下w3c上面的定义: 定义和用法toFixed(n) 方法可把 Number 四舍五入为 ...

  4. 使用spring boot，gradle，idea，js，html创建一个小的前后端程序

    1:配置build.gradle,添加依赖等 buildscript { repositories { mavenCentral() } dependencies { classpath('org.s ...

  5. JS---案例：图标跟着鼠标飞(有bug)

    案例:图标跟着鼠标飞(有bug) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  6. 纯js轮播图练习-3，类似于淘宝海报带小圆点轮播图

    基于js和css,跟着网上的视频教程,结合自己想要的效果,做出了一个类似于淘宝海报的效果. 如图:淘宝首页 自己做的: 代码: <!DOCTYPE html> <html> & ...

  7. js中关于value的一个小知识点(value既是属性也是变量)

    今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...

  8. 使用js在网页上记录鼠标划圈的小程序

    Spin-Wheel 实现鼠标在网页上转圈时记录转动圈数的小程序,每转一圈记录一次,同时要是顺时针方向的. 问题分析与实现 这个小程序的难点在于如何知道鼠标完成了一个转圈的动作,而且人工使用鼠标划圈时 ...

  9. 模仿bootstrap做的 js tooltip (添加鼠标跟随功能)

    主要思路: 使用jquery hover方法,当进入时显示tooltip,移出时隐藏tooltip当设定为鼠标跟随时,使用mousemove事件显示tooltip根据tooltip显示位置设置,计算t ...

随机推荐

  1. Jackson2.1.4 序列化对象时对属性的过滤

    //对field(所有字段)进行过滤 //对get方法进行过滤 //对isBoolean这样的方法进行过滤 //里面的具体配置有 ANY,DEFAULT,NON_PRIVATE,NONE,PROTEC ...

  2. nfs服务器与客户端配置

    服务器端(PC)配置 ubuntu提供两种NFS服务器:一种以内核模块形式提供,nfs-kernel-server:一种以用户空间程序形式提供,nfs-user-server;两种择一即可.1. 安装 ...

  3. 启动hive出错，提示没有权限

    报错信息如下: which: no hbase in (/usr/local/sqoop-1.4.6.bin__hadoop-2.0.4-alpha/bin:/usr/local/hive/bin:/ ...

  4. es 配置文件

    [root@es02 config]# egrep -v "^(#|$)" elasticsearch.yml cluster.name: v5-applicationnode.n ...

  5. PHP中动态增加属性到对象

    参见: <深入PHP 面向对象.模式与实践>(第三版) [ matt zandstra ] - 3.2章节,设置类中的属性(p17)

  6. ROS ：为IDE配置环境变量

    ROS hydro 自带安装好了opencv 2.4 为了在自己经常使用的开发环境Eric下调用,需要配置Eric的环境变量,好让它可以调用ROS的资源,当然你用其他IDE也要这样配置,配置好了环境变 ...

  7. Convolution Network及其变种（反卷积、扩展卷积、因果卷积、图卷积）

    今天,主要和大家分享一下最近研究的卷积网络和它的一些变种. 首先,介绍一下基础的卷积网络. 通过PPT上的这个经典的动态图片可以很好的理解卷积的过程.图中蓝色的大矩阵是我们的输入,黄色的小矩阵是卷积核 ...

  8. PHP 初学之登录查询小case

    说明:如误入本文,请忽略即可,内容仅为记录. 功能:登录(不验证),查询所有列表,删除记录.--很简单,仅为熟悉代码. // MySQL,新建数据库data,导入如下sql ; -- -------- ...

  9. e666. 创建缓冲图像

    A buffered image is a type of image whose pixels can be modified. For example, you can draw on a buf ...

  10. UART通信协议

    第一部分: UART使用的是 异步,串行通信.    串行通信是指利用一条传输线将资料一位位地顺序传送.特点是通信线路简单,利用简单的线缆就可实现通信,降低成本,适用于远距离通信,但传输速度慢的应用场 ...