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 ...
随机推荐
- Jackson2.1.4 序列化对象时对属性的过滤
//对field(所有字段)进行过滤 //对get方法进行过滤 //对isBoolean这样的方法进行过滤 //里面的具体配置有 ANY,DEFAULT,NON_PRIVATE,NONE,PROTEC ...
- nfs服务器与客户端配置
服务器端(PC)配置 ubuntu提供两种NFS服务器:一种以内核模块形式提供,nfs-kernel-server:一种以用户空间程序形式提供,nfs-user-server;两种择一即可.1. 安装 ...
- 启动hive出错,提示没有权限
报错信息如下: which: no hbase in (/usr/local/sqoop-1.4.6.bin__hadoop-2.0.4-alpha/bin:/usr/local/hive/bin:/ ...
- es 配置文件
[root@es02 config]# egrep -v "^(#|$)" elasticsearch.yml cluster.name: v5-applicationnode.n ...
- PHP中动态增加属性到对象
参见: <深入PHP 面向对象.模式与实践>(第三版) [ matt zandstra ] - 3.2章节,设置类中的属性(p17)
- ROS :为IDE配置环境变量
ROS hydro 自带安装好了opencv 2.4 为了在自己经常使用的开发环境Eric下调用,需要配置Eric的环境变量,好让它可以调用ROS的资源,当然你用其他IDE也要这样配置,配置好了环境变 ...
- Convolution Network及其变种(反卷积、扩展卷积、因果卷积、图卷积)
今天,主要和大家分享一下最近研究的卷积网络和它的一些变种. 首先,介绍一下基础的卷积网络. 通过PPT上的这个经典的动态图片可以很好的理解卷积的过程.图中蓝色的大矩阵是我们的输入,黄色的小矩阵是卷积核 ...
- PHP 初学之登录查询小case
说明:如误入本文,请忽略即可,内容仅为记录. 功能:登录(不验证),查询所有列表,删除记录.--很简单,仅为熟悉代码. // MySQL,新建数据库data,导入如下sql ; -- -------- ...
- e666. 创建缓冲图像
A buffered image is a type of image whose pixels can be modified. For example, you can draw on a buf ...
- UART通信协议
第一部分: UART使用的是 异步,串行通信. 串行通信是指利用一条传输线将资料一位位地顺序传送.特点是通信线路简单,利用简单的线缆就可实现通信,降低成本,适用于远距离通信,但传输速度慢的应用场 ...