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轴

  • 相关阅读:
    js template实现方法
    linux su和sudo命令的区别
    使用u盘安装os x系统
    单个APP页面支持屏幕旋转
    iOS 抓取 HTML ,CSS XPath 解析数据
    Oslo 相机 App
    App 开发步骤
    iOS 自动布局框架 – Masonry 详解
    细聊 Cocoapods 与 Xcode 工程配置
    2017网页设计趋势
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9314393.html
Copyright © 2011-2022 走看看