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>

  • 相关阅读:
    vmware虚拟机迁移系统到其它磁盘(xjl456852原创)
    值得思考的
    OS X系统特有文件目录说明
    计算机组成原理语言层级
    PC启动过程详解
    对大学计算机培养方案路线回顾
    Django学习笔记(二)App创建之Model
    Django学习笔记 (一) 开发环境配置
    HTML的发展历史
    如何设置MySql Server远程访问(Debian Linux)
  • 原文地址:https://www.cnblogs.com/xingbinggong/p/2182751.html
Copyright © 2011-2022 走看看