zoukankan      html  css  js  c++  java
  • js--事件对象的理解3

    实例2: 跟随鼠标的DIV--

    <script>
    document.onmousemove=function (ev)
    {
    	var oEvent=ev||event;
    	var oDiv=document.getElementById('div1');
    	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    	
    	oDiv.style.left=oEvent.clientX+scrollLeft+'px';
    	oDiv.style.top=oEvent.clientY+scrollTop+'px';   //一般都要这么写,防止潜在的问题发生。oEvent.clientY+scrollTop
    	//非谷歌浏览器情况下document.documentElement.scrollTop;谷歌浏览器情况下document.body.scrollTop;
    };
    </script>
    

    实例3:offsetLeft

      

    <head>
    <style>
    #div1 {100px; height:100px; background:red; border:1px solid black; padding:10px; margin:20px; position:absolute; left:100px; top:100px;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload=function ()
    {
    	var oDiv=document.getElementById('div1');
    	
    	alert(oDiv.offsetLeft);
    };
    </script>
    </head>
    
    <body>
    <div id="div1"></div>
    </body>
    

      

  • 相关阅读:
    day37 事务
    小组分享
    day36 pymysql 索引
    day 35 多表查询
    day 35 作业
    day 34 作业
    AST 节点类型对照表
    babel _shallowEqual.default
    js Proxy
    Symbol
  • 原文地址:https://www.cnblogs.com/lanyueff/p/4604336.html
Copyright © 2011-2022 走看看