zoukankan      html  css  js  c++  java
  • 鼠标位置距浏览器窗体距离


    代码例如以下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    <style type="text/css">
    #test_div {
    	400px;
    	height: 400px;
    	background-color: red;
    }
    </style>
    	</head>
    	<body>
    	<div id="test_div"></div>
    	</body>
    <script type="text/javascript">
    	function mousePos(e){
    		e=e||window.event;
    		var scrollX=document.documentElement.scrollLeft||document.body.scrollLeft;//分别兼容ie和chrome
    		var scrollY=document.documentElement.scrollTop||document.body.scrollTop;
    		var x=e.pageX||(e.clientX+scrollX);//兼容火狐和其它浏览器
    		var y=e.pageY||(e.clientY+scrollY);
    		console.log(x,y);
    		return {x:x,y:y};
    	}
    	var test=document.querySelector("#test_div");
    	test.onclick=function(e){
    		mousePos(e);
    	}
    </script>
    </html>
    

    当中的document.documentElement.scrollLeft和document.body.scrollLeft各自是ie和chrome的方法,而火狐中的pageX能够直接获取滑动的距离。

    代码位置例如以下:

    http://runjs.cn/code/6a8wblce



  • 相关阅读:
    webService 服务端搭建
    ss2h 整合
    Java绘制登陆验证码
    c3p0连接池
    DBCP连接池
    Cglib动态代理
    会话技术(Cookie,Session)
    Tomcat设置角色和密码
    转发和重定向
    JDK动态代理
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/6721344.html
Copyright © 2011-2022 走看看