盒子跟随鼠标移动而移动(兼容IE8)
时间:2020-04-12
本文章向大家介绍盒子跟随鼠标移动而移动(兼容IE8),主要包括盒子跟随鼠标移动而移动(兼容IE8)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求
通过JavaScript使盒子跟随着鼠标的移动而移动,并且当页面出现滚动条时,盒子也会跟随鼠标正常移动(兼容IE8)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div跟随鼠标移动</title>
<style>
div{
width: 200px;
height: 200px;
background-color: skyblue;
/*注意此处需要设置盒子的定位方式,否则后面设置盒子的偏移量无效*/
position: absolute;
}
body{
width: 2000px;
height: 2000px;
}
</style>
<script>
window.onload = function () {
let box = document.getElementById("box");
let odj = document.documentElement;
odj.onmousemove = function (event) {
// 解决IE8对event的兼容性问题
event = event || window.event;
// 解决body和documentElement的兼容性问题(谷歌浏览器和其他浏览器的兼容性)
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//设置盒子的水平偏移量 注意需要加上单位
box.style.left = event.clientX + sl + "px";
//设置盒子的垂直偏移量
box.style.top = event.clientY + st + "px";
};
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
原文地址:https://www.cnblogs.com/TomHe789/p/12687557.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- laravel-admin利用ModelTree实现对分类信息的管理
- Linux系统下快速配置HugePages的完整步骤
- Laravel5.1 框架关联模型之后操作实例分析
- PHP实现的多进程控制demo示例
- 你可能不知道的一些linux文件权限管理办法
- Laravel框架路由与MVC实例详解
- python实现学生管理系统开发
- 使用 chkconfig 和 systemctl 命令启用或禁用 Linux 服务的办法
- PHP defined()函数的使用图文详解
- 详解在Linux中清空或删除大文件内容的5种办法
- php和redis实现秒杀活动的流程
- CentOS 7中搭建NFS文件共享存储服务的完整步骤
- PHP检测一个数组有没有定义的方法步骤
- Yii2.0框架模型多表关联查询示例
- Yii2.0框架模型添加/修改/删除数据操作示例