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跟随鼠标移动的更多相关文章

  1. 一组div跟随鼠标移动,反应鼠标轨迹

    <!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...

  2. javascript 一串DIV跟随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. javascript div跟随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 鼠标拖动div,div跟随鼠标移动效果

    <div id="boxDiv" style='width:20px;height:20px;position:absolute;background:red;'>   ...

  5. js 实现div跟随鼠标移动

    今天看到了一个自己可以随心所欲的拖到div到页面的任意位置.感觉挺好的,就心血来潮的查询了一下,看看网友做的 代码如下: <script>function doit(){ var obj ...

  6. jquery对div元素进行鼠标移动(稍稍修改下可以实现div跟随鼠标)

    /* 网上找了资料都是对于event.clientX和offset().left进行了计算,但是去掉了这个计算方式,直接使用当前坐标也一样,效果都一样不太好 strHeader:标题 jquery定位 ...

  7. 【案例】DIV随鼠标移动而移动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 一款基于TweenMax跟随鼠标单击移动的div

    今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  9. html页面设置一个跟随鼠标移动的DIV(jQuery实现)

    说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...

随机推荐

  1. hadoop排序 -- 全排序

    目录 一.关于Reducer全排序 1.1. 什么叫全排序 1.2. 分区的标准是什么 二.全排序的三种方式 2.1. 一个Reducer 2.2. 自定义分区函数 2.3. 采样 一.关于Reduc ...

  2. VCC、VDD、VSS以及VBAT的区别

    在STM32 的学习中,发现有几种看起来相关的名称,分别是VCC.VDD.VSS.VBAT,在经过搜索查找之后,总结如下: 1.VCC的C是Circuit的意思,是指整个供电回路的电压, 也有人说VC ...

  3. git——本地项目上传到git

    1.对于github相信大家写自动化代码的人都不陌生,而且这也可以说是你进军自动化的一项必须解锁的技能,今天抽空开始整理笔记,顺便整理下github的基本使用,从本地上传代码托管: 一.从无到有:先注 ...

  4. A1048

    给n个正整数,再给一个m,如果n个数中存在a+b=m(a<=b),则输出a,b. 如果有两组以上,则输出a最小的一组. #include<cstdio> #include<al ...

  5. Golang 对接宝付、通联、富友金账户...填坑记

    一.宝付私钥加密,公钥解密 由于对RSA加密解密原理不是很熟悉,宝付也没有Golang的Demo提供.Go语言库里一般都是私钥解密.公钥加密,或者私钥签名.公钥验签.宝付需要反过来,这里也到好找到了h ...

  6. Flex copy and paste

    <?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx ...

  7. SSM框架及例子(转)

    SSM 手把手教你整合最优雅SSM框架:SpringMVC + Spring + MyBatis 博客地址:http://blog.csdn.net/qq598535550/article/detai ...

  8. [arc067F]Yakiniku Restaurants[矩阵差分]

    Description 传送门 Solution 假如我们确定了烧烤店区间[l,r],则票j必定会选择在B[i][j](l<=i<=r)最大的烧烤店使用. 反过来想,我们想要票j在第i个烧 ...

  9. 优步UBER司机全国各地奖励政策汇总:北京、上海、广州、深圳、佛山、天津、南京、武汉、成都、重庆、济南、西安、宁波、青岛、长沙、苏州

    Uber当周奖励政策 当前奖励包括:高峰翻倍奖励.行程奖励.金牌司机奖励 获得任何奖励的前提条件: 当周评分高于4.7分,当周成单率高于45%,且当周完成至少5单(含5单) 滴滴快车单单2.5倍,注册 ...

  10. Elasticsearch5.x版本中对Text类型进行聚合时提示illegal_argument_exception

    Having this field in my mapping "answer": { "type": "text", "fiel ...