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 ...
随机推荐
- 大数据Hadoop的HA高可用架构集群部署
1 概述 在Hadoop 2.0.0之前,一个Hadoop集群只有一个NameNode,那么NameNode就会存在单点故障的问题,幸运的是Hadoop 2.0.0之后解决了这个问题,即支持N ...
- linux不重启挂载磁盘安装grub
挂载.分区.grub 通过给一块新磁盘安装grub回顾磁盘挂载.分区文件系统创建等操作: 该实验基于(CtonOS6.8:kernel:2.6.32-642.15.1.el6.x86_64) 1.通过 ...
- linux查看文件命令tail的使用
一.介绍 linux tail命令用途是依照要求将指定的文件的最后部分输出到终端中,通俗讲来,就是把某个档案文件的最后几行显示到终端上,假设该档案有更新,tail会自己主动刷新,确保你看到最新的档案内 ...
- Python学习:19.Python设计模式-单例模式
一.单例模式存在的意义 在这里的单例就是只有一个实例(这里的实例就像在面向对象的时候,创建了一个对象也可以说创建了一个实例),只用一个实例进行程序设计,首先我们可以了解一下什么时候不适合使用单例模式, ...
- 20155210 2016-2017-2《Java程序设计》课程总结
20155210 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业1:你期望的师生关系 预备作业2:做中学 预备作业3:虚拟机安装 第一周作业:教材 ...
- su的使用与退出
偶尔用回到ubuntu系统,想切换到su,总是显示不成功,也许是初次使用,即需要设定一下: 使用sudo $:sudo passwd 系统提示输入密码,即安装时的用户密码,然后,系统提示输入两次新密码 ...
- thinkphp 去除空格
- 实时备份工具之inotify+rsync
1.inotify简介 inotify 是一个从 2.6.13 内核开始,对 Linux 文件系统进行高效率.细粒度.异步地监控机制, 用于通知用户空间程序的文件系统变化.可利用它对用户空间进行安全. ...
- JavaWeb(十七)——JSP中的九个内置对象
一.JSP运行原理 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet ...
- MES与ERP的区别(转)
MES和ERP有很大的不同,主要体现在以下几个方面: 1.管理的目标不同 ERP的重点在于财务,也就是从财务的角度出发来对企业的资源进行计划,相关的模块也是以财务为核心的展开,最终的管理数据也是集中到 ...