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 ...
随机推荐
- C语言链队列
链队列类似于单链表,为了限制只能从两端操作数据,其结构体内有2个指针分别指向头尾,但队列里的节点用另一种结构体来表示,头尾指针则为指向该结构体的类型.只能通过操作头尾指针来操作队列. typedef ...
- C语言顺序队列
顺序队列是一种只能在一头进和另一头出的数据结构,所以结构体里设2个指针分别指向头部和尾部,用数组来存储数据. #define MAXSIZE 1024 typedef int elemtype; ty ...
- stm32 IO口八种模式区别
初学STM32,遇到I/O口八种模式的介绍,网上查了一下资料,下面简明写出这几种模式的区别,有不对的地方请大家多多指正! 上拉输入模式:区别在于没有输入信号的时候默认输入高电平(因为有弱上拉).下拉输 ...
- 最近公共祖先 lca (施工ing)
声明 咳咳,进入重难点的图论算法之一(敲黑板): 题目: 洛谷 P3379 先放标程,施工ing,以后补坑!!!(实在太难,一个模板这么长 [ 不过好像还是没有 AC自动机 长哎 ],注释都打半天,思 ...
- 20155211实验2 Windows口令破解
20155211实验2 Windows口令破解 实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 实验原理 口令破解方法 口令破解主要有两种方法:字典破解和 ...
- Oracle下建立dblink时的权限问题
如果用普通用户,如果没授权,是无法建立dblink的: [oracle@oracle000 ~]$ sqlplus gao/gao lines) SQL Production :: Copyright ...
- c++编译器处理 函数返回值
X bar() { X xx; return xx; } // compiler generated temporary X __temp0; ( bar( __temp0 ), __temp0 ). ...
- Git操作指令
1.创建版本库 git init 2.把工作区修改过的文件添加到版本库暂存区,点号表示当前目录下所有文件; git add .#查看仓库状态git status 3.把版本库暂存区的文件提交到当前分支 ...
- python学习笔记01 --------------hello world 与变量。
1.第一个程序: print('hello world') 输出结果: hello world 2.变量 2.1 变量的作用: 把程序运算的中间结果临时存到内存里,以备后面的代码继续调用. 2.2 变 ...
- 451. Swap Nodes in Pairs【LintCode java】
Description Given a linked list, swap every two adjacent nodes and return its head. Example Given 1- ...