zoukankan      html  css  js  c++  java
  • DIV随鼠标滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>JavaScript得到鼠标坐标</title>


    <script language="javascript" type="text/javascript">
    <!--
    //这只是一种函数调用方法,当然也可以<body onmousemove="fun()">这样来调用
    //用document.body.clientWidth;来获取浏览器宽度。
    function document.onmousemove() {
    var xx = document.getElementById("x");
    var yy = document.getElementById("y");
    var adiv = document.getElementById("adiv");
    var al = document.getElementById("al");
    xx.innerHTML
    = "相对位置:X:" + window.event.x + " Y:" + window.event.y;
    yy.innerHTML
    = "绝对位置:X:" + window.event.screenX + " Y:" + window.event.screenY;


    adiv.innerHTML
    = "anchor的位置:X:" + al.getBoundingClientRect().right+" offsetWidth:"+al.offsetWidth;



    var xy = document.getElementById("xy");
    xy.style.top
    = parseInt(window.event.y - 40) + "px";
    xy.style.left
    = parseInt(window.event.x - 20) + "px";
    }
    //-->
    </script>


    </head>
    <body>
    position属性非常重要。DIV的position属性设为relative随鼠标移动,absolute可设置绝对位置。
    <div id="x">
    x
    </div>
    <div id="y">
    y
    </div>
    <div id="xy" style="position: relative; 50px; left: -100px;">
    Follow_Me
    </div>
    <br />
    <div>
    <div id="al" style=" 50px; left: 400px; position: absolute;">
    <a href="#">anchor</a>
    </div>
    </div>
    <div id="adiv">
    </div>
    </body>
    </html>

  • 相关阅读:
    webstorm 2017 激活破解
    落在纸上的思考
    Mysql数据库备份脚本
    asp.net c# 打开新页面或页面跳转
    转正专业考试
    关于mysql-5.7.23-winx64.msi的安装
    win server 2012 R2 你需要先安装 对应于 KB2919355 的更新
    零碎
    按钮
    猪猪公寓——冲刺第一天
  • 原文地址:https://www.cnblogs.com/xingbinggong/p/2182751.html
Copyright © 2011-2022 走看看