<!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. JavaScrip——对话框的简单应用（判断isNaN）

    综合运用 isNaN的用法:判断是不是一个合法的数字类型,是数字返回false,不是返回true 1.我们用prompt来接收输入的内容 2.通过isNaN来做判断 3.最后用alert输出结果 &l ...

  2. thymeleaf+bootstrap，onclick传参实现模态框中遇到的错误

    一个困扰了N久的问题... 网上大多帖子是这么写的 onclick调javascript函数时,不能直接使用onclick=“editUser(${prod.id})”,这样会报错,需要修改成如下的格 ...

  3. print spooler 服务无法启动 打印机全部消失

    这往往是失败的打印任务导致的. 打开 C:\Windows\System32\spool\PRINTERS ,这个目录下的文件全是打印缓存,失败的任务也保存在这里.把这里的文件全部删除,然后再重新启动 ...

  4. win7下hadoop编程eclipse的配置

    本人hadoop初学,折腾第一个hadoop1.1.2花了好几天,让各位见笑了, WARN NativeCodeLoader:52 - Unable to load native-hadoop lib ...

  5. W/MessageQueue: Handler (android.os.Handler) {4241f8f8} sending message to a Handler on a dead thread

    缩略信息是: sending message to a Handler on a dead thread 我是用IntentService时报的 稍微纤细一点儿的信息是: Handler (andro ...

  6. 如何对抗、预防 SQL注入 攻击

    一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编程时的疏忽,通过SQL语句,实现无帐号登录,甚至篡改数据库. 二.SQL注入攻击的总体 ...

  7. AppendMenu函数添加菜单

    这个函数添加新项目到指定菜单的末尾.你可以使用appendmenu指定内容,外观,和菜单项行为. BOOL AppendMenu( HMENU hMenu, UINT uFlags, UINT uID ...

  8. struts2的零配置

    最近开始关注struts2的新特性,从这个版本开始,Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置.配置文件精简了,的确是简便了 ...

  9. windows 2008 r2 安装TabsStudio

    windows 2008 r2 安装TabsStudio 办法如下: HKLM\SOFTWARE\Policies\Microsoft\Windows\Installer.如果没有这个项,则新建这个项 ...

  10. JavaScript入门第4天

    闭包:子函数可以使用父函数的局部变量 <html> <head> <title>闭包 </title> <script> function ...