zoukankan      html  css  js  c++  java
  • 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轴

  • 相关阅读:
    Jenkins 完成安装环境配置
    Jenkins中文社区的所有镜像地址
    VueX源码分析(3)
    VueX源码分析(2)
    VueX源码分析(1)
    Element表单验证(2)
    Element表单验证(1)
    配置淘宝镜像,不使用怪异的cnpm
    React动态import()
    cnpm 莫名奇妙bug 莫名奇妙的痛
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9314393.html
Copyright © 2011-2022 走看看