<!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. HISTTIMEFORMAT 设置历史命令时间的格式

    echo 'HISTTIMEFORMAT="%F %T `whoami`"  ' >>/etc/bashrc whoami 完了后面要有空格不然会连住和命令 ===== ...

  2. java list分组 list里面分装的都是对象 按照对象的属性来分组

    http://www.iteye.com/problems/86110 —————————————————————————————————————————————————————————— List& ...

  3. Mysql: Connect/C++ 使用过程中发现返回 std::string 造成的内存泄露

    在使用 Connect/C++ ,测试时发现在调用 getString 出现了内存增长的情况. ConstructOutput(); //打印出当前内存 ;i<;++i) { prepareSt ...

  4. JavaScript裸体识别技术

    当第一次听说nude.js的时候,我非常怀疑这种浏览器端的裸体识别技术,有几个理由: 正常情况下,裸体识别应该在服务器端进行,这样,那些色情图片或色情视频才能在发送给浏览者前被发现. 我不相信完全依赖 ...

  5. jQuery方法笔记

    .clone() $(selector).clone(includeEvents) $(this).clone(true) //boolean值,true/false分别对饮是否复制元素的所有事件处理

  6. 第三百零八节，Django框架,models.py模块，数据库操作——链表结构，一对多、一对一、多对多

    第三百零八节,Django框架,models.py模块,数据库操作——链表结构,一对多.一对一.多对多 链表操作 链表,就是一张表的外键字段,连接另外一张表的主键字段 一对多 models.Forei ...

  7. C++ 接口（抽象类）

    C++ 接口(抽象类)接口描述了类的行为和功能,而不需要完成类的特定实现. C++ 接口是使用抽象类来实现的,抽象类与数据抽象互不混淆,数据抽象是一个把实现细节与相关的数据分离开的概念. 如果类中至少 ...

  8. java---final、finally、finalize的区别

    Java finalize方法使用 标签: javaappletobjectwizardjvm工作 2011-08-21 11:37 48403人阅读 评论(5) 收藏 举报  分类: Java(96 ...

  9. PhoneGap开发不可或缺的五件装备

    PhoneGap是一种介于WebApp和NativeApp之间的解决方案,它为每种移动客户端提供一个Native的壳,这种壳里边包着一个Web应 用.借助于壳,Web应用可以被安装,可以被发布到各大市 ...

  10. Python中tab键自动补全功能的配置

    新手学习Python的时候,如何没有tab键补全功能,我感觉那将是一个噩梦,对于我们这种菜鸟来说,刚接触python,对一切都不了解,还好有前辈们的指导,学习一下,并记录下来,还没有学习这个功能小伙伴 ...