<!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. Android——ArrayList 、LinkList、List 区别 & 迭代器iterator的使用 & HashMap、Hashtable、LinkedHashMap、TreeMap

     ArrayList .LinkList.List 区别 & 迭代器iterator的使用 & HashMap.Hashtable.LinkedHashMap.TreeMap 一.几个 ...

  2. DataGridView使用技巧七：列顺序的调整、操作行头列头的标题

    一.列顺序的调整 设定DataGridView的AllowUserToOrderColumns为True的时候,用户可以自由调整列的顺序. 当用户改变列的顺序的时候,其本身的Index不好改变,但是D ...

  3. PCL,VTK及其依赖库的编译-十分详细

    所有库的编译教程都很详细,全都上传到百度文库. 1.VS2013-Qt5.5.1-动态编译-VTK7.0.0http://wenku.baidu.com/view/749528a433687e21ae ...

  4. 利用层的table-row、table-cell属性进行页面布局

    利用层的table-row.table-cell属性可以进行等高.宽度自适应页面布局,这是参看了<我所知道的几种display:table-cell的应用>及<基于display:t ...

  5. 25+开源的在线购物软件(PHP, JavaScript 和 ASP.Net)

    25 +免费开源的电子商务解决方案,提供了建立一个在线购物所有主要功能,并能够连接到一个支付处理系统1. Magento Magento是一套专业开源的PHP电子商务系统.Magento设计得非常灵活 ...

  6. 终于想明白一些事，关于NAS

    一直以来想搞好一部NAS存储小孩的视频和照片,一直纠结用什么硬件,硬件解决后虽然不甚满意,不过无论怎么样都算投入巨资(超过7千……)组装完毕,然后就一直纠结用什么NAS系统,终于下定决心使用了OMV, ...

  7. JDK中的序列化和反序列化

    题外话:诸事缠身,不知不觉距离上一篇就将近一个月了,读书不易,学习不易,唯有坚持. 写来写去始终不满意,索性贴一个比较好的文章吧! 参考: [Java基础]序列化与反序列化深入分析

  8. 图像边缘检測--OpenCV之cvCanny函数

    图像边缘检測--OpenCV之cvCanny函数 分类: C/C++ void cvCanny( const CvArr* image, CvArr* edges, double threshold1 ...

  9. jquery validate自定义规则

    //检查身份证号码是否存在 $.validator.addMethod("checkIDCardExist", function (value, element) { if ($( ...

  10. php将汉字转换为拼音和得到词语首字母(四)

    <?php function getfirstchar($s0){ $firstchar_ord=ord(strtoupper($s0{0})); if (($firstchar_ord> ...