<!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. Android develop tricks——整理自国外的一些Blog

    ViewDragHelper --视图拖动是一个比較复杂的问题.这个类能够帮助解决不少问题.假设你须要一个样例,DrawerLayout就是利用它实现扫滑.Flavient Laurent 还写了一些 ...

  2. 使用Zipalign工具优化Android APK应用记录

    生成的Android应用APK文件最好进行优化,因为APK包的本质是一个zip压缩文档,经过优化能使包内未压缩的数据有序的排列,从而减少应用程序运行时的内存消耗.我们可以使用Zipalign工具进行A ...

  3. APP运营干货分享

    从移动互联网市场总监岗位出发,从几个方面来阐述移动互联网部门如何制定一份运营推广策划案,至于关于移动互联网,移动电商是大趋势这些虚的.空泛的文字,不展开说了. 一.竞品分析 1.选择竞品,做好定位(选 ...

  4. Android_AsyncTask_Method

    package com.example.day07_asynctask_method; import android.os.AsyncTask; import android.os.Bundle; i ...

  5. HttpWebRequest 上传图片

    public string HttpUploadFile() { string url = "http://localhost:50380/WebForm1.aspx"; stri ...

  6. Bootstrap--全局css样式之图片

    好久没有更新博客了,在这里跟大家分享一下生活的小乐趣,作为程序员,整天对着电脑是很不爽的,加班也是常有的,所以连续工作对身体是很不爽的,而且随着年龄的增加,程序员身体状况会越来越差,还是建议大家要常去 ...

  7. 汉诺塔的问题：4个柱子，如果塔的个数变位a,b,c,d四个，现要将n个圆盘从a全部移到d,移动规则不变

    四柱汉诺塔问题的求解程序.解题思路:如a,b,c,d四柱. 要把a柱第n个盘移到目标柱子(d柱),先把上层 分两为两部份,上半部份移到b柱,下半部分移到c柱,再把第n盘移到 目标柱子,然后,c柱盘子再 ...

  8. Win8.1中打不开IE的解决方法

    IE11 打不开了,重新安装了IE也解决不了问题,咋整,找了好久终于找到原因,原来是权限的问题,特此和大家共享 解决办法: WIN+R,regedit,找到HKEY_CURRENT_USER\Soft ...

  9. Meteor：用户账号管理添加密码和微博weibo账号系统支持

    Meteor账户系统构建与accounts-base包之上,并为publish和methods提供userId的顶层支持.核心包提供的功能有:数据库中的用户记录支持:额外的包提供密码安全验证:第三方登 ...

  10. vmware workstation 12 安装windows7 网卡不能安装驱动的问题

    在使用vmware workstation 12 安装windows7 之后,网卡不能安装驱动不能正常显示网络连接,需要修改该虚拟机的".vmx"配置文件 在配置文件中添加下面一行 ...