<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>苹果菜单（每个图片中心点的坐标）</title>
	<style>
	body{
		margin:0;
		padding:0;
	}
               div{
               	position: absolute;
               	bottom: 0;
               	width: 100%;
               	text-align: center;
               	background: pink;
               }
               div img{
               	width: 64px;
               }
	</style>

	<script>
                    window.onload = function(ev){
                                    var oDiv = document.getElementById('div1');
                                    var oPut = document.getElementsByTagName('input');
                                    var Oimg = oDiv.getElementsByTagName('img');
                                    var oEvent = ev||event;

                                    for (var i = 0; i < Oimg.length; i++) {
                                    	  var x = Oimg[i].offsetLeft+Oimg[i].offsetWidth/2;
                                    	  var y = Oimg[i].offsetTop+oDiv.offsetTop+Oimg[i].offsetHeight/2;

                                    	  var a = oEvent.clientX - x;    /*鼠标距图片中心店的横向距离*/
                                    	  var b = oEvent.clientY - y;    /*鼠标距图片中心店的纵向距离*/
                                    	  alert(oEvent.clientX);

                                    	  var dis = Math.sqrt(a*a+b*b);      /*鼠标点距图片中心点两点之间c的距离*/

                                    	  oPut[i].value = dis;
                                    }
                    };
	</script>
</head>
<body>
	<input type="text" />
	<input type="text" />
	<input type="text" />
	<input type="text" />
	<input type="text" />
	<div id="div1">
		<img src="1.png" />
		<img src="2.png" />
		<img src="3.png" />
		<img src="4.png" />
		<img src="5.png" />
	</div>
</body>
</html>

　　在onload里，js文件一加载便被执行，所以取不到鼠标的clientX和clientY，window.onload需要改为document.onmousemove,当移入页面的时候执行

鼠标事件（window.onload的自己的错误）的更多相关文章

  1. 浏览器事件window.onload、o…

    原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...

  2. [转载]浏览器事件window.onload、onfocus、onblur、ons

    原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...

  3. 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解

    1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...

  4. window.onload

    window.onload事件 window.onload  = function ()  { JS代码块} 当页面中的DOM节点(元素)都加载完的时候执行的JS代码

  5. JS 页面加载触发事件 document.ready和window.onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  6. IE11错误：Exception in window.onload: An error has occuredJSPlugin.3005 解决方案

    问题:新安装的IE11无法使用F12开发者工具,DOC资源管理器提示错误“Exception in window.onload: An error has occuredJSPlugin.3005”. ...

  7. Window.onLoad 和 DOMContentLoaded事件的先后顺序

    相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西. 一般情况下,DOMContentLoade ...

  8. Window.onload事件

    window.onload是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况

  9. jquery load()函数和window.onload事件

    我想用jquery load()一个饼状图页面, 但是load不出来 代码如下: 后来百度了一下,解决办法如下: window.onload事件只有在文档载入的时候才会执行的,你载入子页面不会触发这个 ...

随机推荐

  1. 辛星浅谈PHP的混乱的编码风格

    我们都知道.各种编程语言都有自己的风格,即使是像C和C++那样一脉相承的语言(C++本意全然兼容C的语法).编程风格上还是有些区别.比方非常典型的就是C++风格的单行凝视和C风格的多行凝视. 而尽管J ...

  2. C#自定义控件：WinForm将其它应用程序窗体嵌入自己内部【转载】

    这是最近在做的一个项目中提到的需求,把一个现有的窗体应用程序界面嵌入到自己开发的窗体中来,看起来就像自己开发的一样(实际上……跟自己开发的还是有一点点区别的,就是内嵌程序和宿主程序的窗口激活状态问题) ...

  3. C++和python使用struct传输二进制数据结构来实现

    网络编程问题往往涉及二进制数据的传输.在C++经常使用的传输是文本字符串和分组结构. 假设该数据可以预先送入连续的内存区域,然后让send函数来获得的第一个地址,这一块连续的内存区就能完成传输数据.文 ...

  4. istringstream

    编写程序,将来自一个文件中的行保存在一个vector<string>中,然后使用一个istringstream从vector读取数据成员,每次读取一个单词 #include <ios ...

  5. Android 导入导出CSV，xls文件 .

    1 . http://www.bangchui.org/read.php?tid=62 2 .http://blog.csdn.net/xinzheng_wang/article/details/77 ...

  6. 常用免费的WebServices地址

    天气预报Web服务,数据来源于中国气象局 公用事业http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 中国股票行情分时走势预览缩略图 ...

  7. 通过代码设置button中文字的对齐方式

    // button.titleLabel.textAlignment = NSTextAlignmentLeft; 这句无效 button.contentHorizontalAlignment = U ...

  8. 深入理解计算机系统第二版习题解答CSAPP 2.12

    对于下面的值,写出变量x的C语言表达式.代码应该对任何字长w≥8都能工作.我们给出当x=0x87654321以及w=32时表达式的结果,仅供参考. A.x的最低有效字节,其他位均为0.[0x00000 ...

  9. TamperData火狐插件启用

    今天第一次在准备学习sqlmap的时候看到有人使用了这个TamperData火狐的插件,所以我也安装来看看,光是安装了,但是重启浏览器之后不知道怎么启用,得不到想要的运行界面,所以在这里记录一下,为自 ...

  10. 服务器的SVN项目版本较低，check out 下来后报错

    check out下来后报错提示: svn: E155036: Please see the 'svn upgrade' commandsvn: E155036: Working copy '/hom ...