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. 【六】tf和cgi进行联合试验,完成日志服务器

    [任务6]tf和cgi进行联合试验,完成日志服务器 [任务6]tf和cgi进行联合试验,完成日志服务器 改装gen-cpp目录下client.cpp文件 启动Nginx服务和gen-cpp目录下编译后 ...

  2. 20155234java实验一

    实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没有Linux基础的同学建议先学习Linux基础入门(新版))Vim ...

  3. 20155307 2017-2018-2 《Java程序设计》第2周学习总结

    20155307 2017-2018-2 <Java程序设计>第2周学习总结 教材学习内容总结 整数:short(2 byte).int(4 byte).long(8 byte) 字节(b ...

  4. 20145226夏艺华 Exp6 信息搜集与漏洞扫描

    20145226夏艺华 Exp6 信息搜集与漏洞扫描 基础问题回答 哪些组织负责DNS,IP的管理? · 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和IP地址管理 ...

  5. Spring框架实例

    一,介绍 Spring框架核心是Ioc控制反转,只要在容器中注册以后,依赖从容器中获取即可 简单的理解:需要一个值,在程序中定义一个变量,但是不赋值,只设置set方法,运行时,容器为该变量赋值 二,实 ...

  6. 那些不能遗忘的知识点回顾——C/C++系列(笔试面试高频题)

    有那么一些零碎的小知识点,偶尔很迷惑,偶尔被忽略,偶然却发现它们很重要,这段时间正好在温习这些,就整理在这里,一起学习一起提高!后面还会继续补充. ——前言 1.面向对象的特性 封装.继承.多态. 封 ...

  7. Q&As:1.cocos2d-html5如何获得鼠标划过事件

    不喜欢按部就班学东西,感觉各种框架各种技术就应该是拿到手用的,这应该是导致我现在学了这么多却没一样精通的缘故吧. 发现自己喜欢在QQ群回答一些菜鸟的问题,就算自己不清楚也会乐意看代码帮助解决╮(╯_╰ ...

  8. Struts 2(二):使用Struts2

    本文简单描述如何在Eclipse中使用使用Struts2,并介绍一下Struts2的配置文件 注:Struts2默认需要Java 5.0及其以上版本的运行环境支持,Web容器需要支持Servlet 2 ...

  9. Python 装饰器备忘

    def deco(attr): ''' 装饰器,共包含三层返回结构 \n 第一层:用于接收 @deco 的参数,此处的代码只在初始化装饰器时执行一次 \n 第二层:用于接收 function,此处的代 ...

  10. 一起来做Chrome Extension《一些问题》

    目录 Unchecked runtime.lastError: The message port closed before a response wa received. 使用 eval Conte ...