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轴

  • 相关阅读:
    2017微软秋招A题
    UVA 494 Kindergarten Counting Game
    loss function与cost function
    coderforces 721b
    coderforces719b
    PyQt4打包exe文件
    PyQt4 UI设计和调用 使用eric6
    PyQt4 进度条和日历 代码
    PyQt4 颜色选择,字体选择代码
    PyQt4调用UI文件
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9314393.html
Copyright © 2011-2022 走看看