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轴

  • 相关阅读:
    排序之选择排序
    排序之冒泡排序
    NOIP 模拟 $22; m d$
    NOIP 模拟 $20; m z$
    NOIP 模拟 $20; m y$
    NOIP 模拟 $20; m 玩具$
    NOIP 模拟 $21; m Median$
    NOIP 模拟 $21; m Park$
    NOIP 模拟 $21; m Game$
    NOIP 模拟 $19; m w$
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9314393.html
Copyright © 2011-2022 走看看