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. 树莓派安装SimpleCV

    开源计算机视觉框架.python2 安装 (http://simplecv.readthedocs.io/en/latest/HOWTO-Install%20on%20RaspberryPi.html ...

  2. python -keras

    Numpy 1. np. shape np.reshape np.prod() astype() dtype() From keras.layers import Input Input():用来实例 ...

  3. 流程控制(if、while、for)

    流程控制 一.if判断 # 1.语法一if 条件:#条件成立时执行的子代码块` 代码1 代码2 代码3# 示例:sex='female'age=18is_beautiful=Trueif sex == ...

  4. ubuntu下python在pycharm环境下安装setuptools和pip,和distutils.core

    python安装好后,我们用pycharm安装所需的第三方模块时,出现“Python packaging tools not found. install packaging tools”点击安装输完 ...

  5. 20155218 《Java程序设计》实验一(Java开发环境的熟悉)实验报告

    20155218 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 一.实验内容及步骤 (一)使用JDK编译.运行简单的java程序 实验结果截图: (二)使用IDEA编辑.编 ...

  6. 20155318Java课堂实践20170510

    20155318Java课堂实践20170510 修改教材P98 Score2.java 让执行结果数组填充是自己的学号:提交在IDEA或命令行中运行结查截图,加上学号水印,没学号的不给成绩 代码 p ...

  7. # 2017-2018-1 20155337《信息安全系统设计基础》第5周学习总结+mybash

    2017-2018-1 20155337<信息安全系统设计基础>第5周学习总结 教材学习内容总结 不论我们是在用C语言还是用JAVA或是其他的语言编程时,我们会被屏蔽了程序的机器级的实现. ...

  8. day 9 追踪一个蓝色的物体

    # -*- coding: utf- -*- import cv2 import numpy as np #.打开摄像头 cap=cv2.VideoCapture('output.avi') ): # ...

  9. Mysql 5.5从零开始学阅读笔记

    第一章 1.什么是数据库? 数据库包含两层含义:保管数据的“仓库”,以及数据管理的方法和技术. 2.表 行被称为记录,列被称为字段 3.主键 primary key,用于唯一标识表中的每一条记录,主键 ...

  10. C# webapi 路由规则和接收数据

    1:新建的web api项目 默认的访问api方式:  (get,post,delect,put)  api+控制器  以Post为例子 post提交单个参数: 接收方法  post提交多个参数  接 ...