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轴

  • 相关阅读:
    NOJ-1581 筷子 (线性DP)
    UVA-242 Stamps and Envelope Size (DP)
    POJ 1860 (SPFA判断正环)
    POJ 3268 最短路水题
    STL----priority_queue
    STL----unique
    POJ 2031(最小生成树Kruskal算法+几何判断)
    POJ 3468(线段树区间修改+区间求和)
    学习线段树
    POJ 1251(最小生成树裸题)
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9314393.html
Copyright © 2011-2022 走看看