div跟随鼠标移动
1、目标是实现div跟随鼠标而移动,分三种情况进行实现
a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能
第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法。
1)获取鼠标的坐标,进行给div坐标赋值,实现如下:
var left = event.clientX;
var top = event.clientY;
box1.style.left = left + "px";
box1.style.top = top +"px";
第二种方式,假如body的高度大于可见高度,则会出现滚动条,clientXY获取的是可见的大小,则多余的部分则无法实现移动,则需要使用下面的方式实现
但是这种方式不兼容IE8,所以如果要兼容IE8,则不能使用。pageX是获取整个页面的大小
var left = event.pageX;
var top = event.pageY;
第三种方式是什么都可以兼容的,涵盖上面两种方式的可行度,就是用可见窗口的加上滚动条的高度即可
var st = document.body.scrollTop || document.documentElement.scrollTop;
var left = event.clientX;
var top = event.clientY;
box1.style.left = left + "px";
box1.style.top = top + st+"px";
注,left轴也一样,我这里只是实现了y轴
div跟随鼠标移动的更多相关文章
- 一组div跟随鼠标移动,反应鼠标轨迹
<!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...
- javascript 一串DIV跟随鼠标移动
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- javascript div跟随鼠标移动
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 鼠标拖动div,div跟随鼠标移动效果
<div id="boxDiv" style='width:20px;height:20px;position:absolute;background:red;'> ...
- js 实现div跟随鼠标移动
今天看到了一个自己可以随心所欲的拖到div到页面的任意位置.感觉挺好的,就心血来潮的查询了一下,看看网友做的 代码如下: <script>function doit(){ var obj ...
- jquery对div元素进行鼠标移动(稍稍修改下可以实现div跟随鼠标)
/* 网上找了资料都是对于event.clientX和offset().left进行了计算,但是去掉了这个计算方式,直接使用当前坐标也一样,效果都一样不太好 strHeader:标题 jquery定位 ...
- 【案例】DIV随鼠标移动而移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一款基于TweenMax跟随鼠标单击移动的div
今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- html页面设置一个跟随鼠标移动的DIV(jQuery实现)
说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...
随机推荐
- ubuntu18 安装apache2.4 php5.6 mysql5.6
源码包下载: 链接:https://pan.baidu.com/s/1uoVMy_QNyR_zqVi06QPqKg 提取码:ll7s 注意: ubuntu安装:sudo apt-get inst ...
- www.pantom.top
新建小站 https://www.pantom.top
- Go学习笔记02
前言 上篇内容,介绍了如何在不同的系统上安装 Go 开发环境和部分参数的配置,也简单介绍了 package 的概念.导入方式和我对包的初始化过程的理解,关于初始化顺序的理解,可能有错误,后期会有修改, ...
- 20155215 《Java程序设计》实验一(Java开发环境的熟悉)实验报告
20155215 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑 ...
- 【课堂实验】Arrays和String单元测试
实验内容 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split Arrays类 sort binarySea ...
- 封印解除:如何在Win10家庭版中启用组策略
@echo off pushd "%~dp0" *.mum >List.txt *.mum >>List.txt for /f %%i in ('findstr ...
- NetWork——TCP的流量控制和拥塞控制
,然后开始执行拥塞避免算法,使拥塞窗口缓慢地线性增大. 这里为什么替换掉了慢开始算法呢,这是因为收到重复的ACK不仅仅告诉我们一个分组丢失了,由于接收方只有在收到另一个报文段时才会产生重复的ACK,所 ...
- mysql 创建外键时发生错误的原因和解决方法
可以去网上查看错误号,就能知道到底哪里出错了 https://zhidao.baidu.com/question/359868536.html 这里1452对应的错误是因为建立外键的表中还有数据,所以 ...
- T-SQL语句基础
连接服务器 - 去哪个仓库找目标数据库 - 找仓库中的目标区域查找目标表 - 找货柜找数据(以行为基础单位) - 在货柜上找到目标的物品 基础T-Sql语句1.SQL语句的注释 2.创建数据库crea ...
- php开发文章发布示例(正则表达式实例开发)
存档: post.php <form method="post" action="viewthread.php" target="_blank& ...