<!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——数据存储：手机外部存储 SD卡存储

    xml <EditText android:layout_width="match_parent" android:layout_height="wrap_cont ...

  2. Spark Streaming中的操作函数讲解

    Spark Streaming中的操作函数讲解 根据根据Spark官方文档中的描述,在Spark Streaming应用中,一个DStream对象可以调用多种操作,主要分为以下几类 Transform ...

  3. 补充下.net知识

    问题1: public int getvalue(int a) { try { a = a + ; ; } catch (Exception) { throw; } finally { a = a + ...

  4. Apache2.4.x版wampserver本地php服务器如何让外网访问及启用.htaccess

    http://www.jb51.net/article/61193.htm ———————————————————————————————————————————— 这篇文章主要介绍了Apache2. ...

  5. js彈出層或者js彈出引用url Frame 層

    function Popup() { var _this = this; this.CssName = "layermask";//樣式 //遮蓋層 this.hiddLayer ...

  6. IntelliJ IDEA 14 利用JRebel实现热部署

    特别鸣谢:http://wlb.wlb.blog.163.com/blog/static/467413201522095132658/ ©IntelliJ IDEA开源社①群 185441009 鸣谢 ...

  7. 最小顶点覆盖(Minimum Vertex Cover)与最大独立集(Maximum Independent Set)

    问题描述:就是在图中找最小的点集,使得覆盖所有边. 和独立集等价:独立集问题:在图中找最大的点集,使得点集内的所有点互不相连. 引理:顶点覆盖集和独立集互补. 上面这个引理使得这两个问题可以相互规约, ...

  8. Spring 依赖注入（DI）的注解

    Spring中想要使用注解进行依赖注入,需要进行如下配置: <beans xmlns="http://www.springframework.org/schema/beans" ...

  9. 第二百九十八节，python操作redis缓存-Set集合类型，可以理解为不能有重复元素的列表

    python操作redis缓存-Set集合类型,可以理解为不能有重复元素的列表 sadd(name,values)name对应的集合中添加元素 #!/usr/bin/env python # -*- ...

  10. C++ 基本的输入输出

    C++ 基本的输入输出C++ 标准库提供了一组丰富的输入/输出功能,我们将在后续的章节进行介绍.本章将讨论 C++ 编程中最基本和最常见的 I/O 操作. C++ 的 I/O 发生在流中,流是字节序列 ...