JS-鼠标跟随块(一个小圆点跟着鼠标跑)
<!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-鼠标跟随块(一个小圆点跟着鼠标跑)的更多相关文章
- js 小野人跟着鼠标移动
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 鼠标经过导航中li时,一个彩色模块跟着鼠标移动
1.鼠标经过导航中li时,一个活动的li跟随鼠标移动,最终移动到鼠标的停留的位置.(如需鼠标离开后让活动的li回到初始位置,则用jq hover事件,当鼠标离开时,给活动的li设置left是0) 2. ...
- 关于js中 toFixed()的一个小坑
作为一名前端,大家都应该知道,toFixed()的作用,toFixed()经常用于前台与后台数据格式的转换,套用下w3c上面的定义: 定义和用法toFixed(n) 方法可把 Number 四舍五入为 ...
- 使用spring boot,gradle,idea,js,html创建一个小的前后端程序
1:配置build.gradle,添加依赖等 buildscript { repositories { mavenCentral() } dependencies { classpath('org.s ...
- JS---案例:图标跟着鼠标飞(有bug)
案例:图标跟着鼠标飞(有bug) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 纯js轮播图练习-3,类似于淘宝海报带小圆点轮播图
基于js和css,跟着网上的视频教程,结合自己想要的效果,做出了一个类似于淘宝海报的效果. 如图:淘宝首页 自己做的: 代码: <!DOCTYPE html> <html> & ...
- js中关于value的一个小知识点(value既是属性也是变量)
今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...
- 使用js在网页上记录鼠标划圈的小程序
Spin-Wheel 实现鼠标在网页上转圈时记录转动圈数的小程序,每转一圈记录一次,同时要是顺时针方向的. 问题分析与实现 这个小程序的难点在于如何知道鼠标完成了一个转圈的动作,而且人工使用鼠标划圈时 ...
- 模仿bootstrap做的 js tooltip (添加鼠标跟随功能)
主要思路: 使用jquery hover方法,当进入时显示tooltip,移出时隐藏tooltip当设定为鼠标跟随时,使用mousemove事件显示tooltip根据tooltip显示位置设置,计算t ...
随机推荐
- Red Hat快捷键操作
Red Hat快捷键操作 .使用虚拟控制台 登录后按“Alt+F2”键可以看到“login:”提示符, 这就是第二个虚拟控制台. 一般新安装的Linux有四个虚拟控制台, 可以用“Alt+F1”到“A ...
- 数据库——SQL中EXISTS怎么用3(转)
有一个查询如下: 1 SELECT c.CustomerId, CompanyName 2 FROM Customers c 3 WHERE EXISTS( 4 SELECT Or ...
- SpringAOP来监控service层中每个方法的执行时间
使用AOP来说,太方便了,并且特别适合这类场景. 代码如下,这里是将要统计的信息写到log文件中,也可以设计成写入表中. package com.ecsoft.interceptor; import ...
- scala实现彩票算法
scala实现彩票算法 (1)具体实现代码如下: package hw1 import scala.util.control._ /** * @author BIGDATA */ object Cp ...
- datanode启动失败
当我动态加入一个hadoop从节点的之后,出现了一个问题: [root@hadoop current]# hadoop-daemon.sh start datanode starting datano ...
- spring—Bean配置
Spring是一个开源的框架,其目标是简化java的开发.为了降低Java开发的复杂性,Spring有如下的特性: >> 基于POJO的轻量级和最小侵入性编程 >> 通过依赖注 ...
- PHP并发IO编程之路
并发IO问题一直是服务器端编程中的技术难题,从最早的同步阻塞直接Fork进程,到Worker进程池/线程池,到现在的异步IO.协程.PHP程序员因为有强大的LAMP框架,对这类底层方面的知识知之甚少, ...
- HTTP协议详解(文档)
目录引言................................................................................................ ...
- qt 编译的文件没有生效
/******************************************************************* * qt 编译的文件没有生效 * qt交叉编译时,生成的可执行 ...
- Java 构造方法的执行过程(猜测)
先说明一点,这篇帖子的内容都是我自己思考的结果,如有误,请务必及时告诉我,非常感谢. 起由: public class NewThread implements Runnable{ Thread t; ...