JS div跟随鼠标移动

一、在body里面新建一个div

<div class="box">

二、在css里面写上样式

PS：一定要写上定位position，因为offsetLeft、offsetTop计算的是当前元素的外边距到已经定位的父元素内边距的水平或者垂直的距离。

<style>.box {height: 200px;width: 200px;border: 2px solid skyblue;position: absolute;left: 100px;top: 100px;}
</style>

三、js代码如下

<script>//1.获取页面元素var box = document.querySelector('.box');//设置开关判断鼠标是在box否按下var flag = false;//2.box绑定鼠标按下事件var delX = 0;var delY = 0;box.onmousedown = function () {flag = true;//获取需要删除的距离delX = event.clientX - box.offsetLeft;delY = event.clientY - box.offsetTop;};//3.整个文档绑定鼠标移动事件document.onmousemove = function () {if (flag) {//删除多余的距离 保持住按下的位置var x = event.clientX - delX;var y = event.clientY - delY;box.style.left = x + 'px';box.style.top = y + 'px';}};//4.给整个文档绑定了 鼠标抬起事件document.onmouseup = function () {flag = false;};
</script>

JS div跟随鼠标移动相关推荐

js效果 div跟随鼠标移动
js效果 div跟随鼠标移动 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
如何让一个div跟随鼠标移动
鼠标移动上去,弹出一个div,并且div跟随鼠标移动. 代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head ...
JavaScript实现一串div跟随鼠标移动效果（幻影效果）
JavaScript实现一串div跟随鼠标移动效果上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果.现在来讲一个进阶版,实现一串div跟随鼠标移动效果,鼠标幻影效果.如图: ...
实现div跟随鼠标移动、点击、拖动而产生的变化
代码一:实现鼠标能够拖动div <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
JavaScript div跟随鼠标移动
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>di ...
跟随鼠标走html代码,div跟随鼠标移动
用到的三个鼠标事件: onmousedown: 当鼠标按下 onmousemove:当鼠标移动 onmouseup:当鼠标松开思路:动态监听鼠标位置,给div设置绝对定位(display: abso ...
JS制作跟随鼠标移动的图片
JS制作跟随鼠标移动的图片有趣的小案例池子: JS实现定时器 JS实现关闭图片窗口 JS实现输入检验获取焦点后隐藏提示内容的输入框 JS实现获取鼠标在画布中的位置聊天信息框显示消息 JS点击切换 ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
JS实现跟随鼠标的提示框
跟随鼠标的提示框鼠标移入到某个关键词就会出现提示框并且在关键词范围内跟随鼠标的移动是怎么实现的呢? 下面来看代码简单的html和css <body><a href="# ...

JS div跟随鼠标移动

JS div跟随鼠标移动相关推荐

最新文章

热门文章