<!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. OC语言--NSFileManager&amp; NSFileHandle

    1.关于文件的介绍 ->什么是文件: 文件概念, 广义文件. 狭义文件(磁盘文件). 文件常见的使用操作(可用命令行演示文件操作的使用场景). ->什么是路径: 简单来说就是,在系统中,要 ...

  2. 细说Java多线程之内存可见性

    编程这些实践的知识技能,每一次学习使用可能都会有新的认识 一.细说Java多线程之内存可见性(数据挣用)         1.共享变量在线程间的可见性                共享变量:如果一个 ...

  3. android学习日记13--数据存储之SharedPreference

    android 数据存储 作为一个完整的应用程序,数据存储必不可少.android 提供了五种不同的数据存储方式:SharedPreferences.SQLite.ContentProvider.文件 ...

  4. 功能丰富的 Perl：轻松调试 Perl

    http://www.ibm.com/developerworks/cn/linux/sdk/perl/culture-4/index.html

  5. C#_Ajax分页MVCPager

    UCJqOrderList @model PagedList<Order> <div id="dvOrders"> <table width=&quo ...

  6. Java基础知识强化之IO流笔记63：随机访问流RandomAccessFile

    1. 随机访问流RandomAccessFile RandomAccessFile类不属于流,是Object类的子类.但它融合了InputStream和OutputStream的功能.支持对随机访问文 ...

  7. MySQL（9）：数据表的约束（列的属性）

    1.首先我们看一下这个图: 1.NULL| not NULL是否为空      规定一个字段的值是否为NULL 2.Default value 字段默认值属性 常见的是一个字段不能为空,而且存在默认值 ...

  8. Activity的启动模式及回退栈的概念

    Activity的启动模式 standard 正常模式 在创建一个新的activity的时候,直接在栈顶创建一个新的activity singleTop 顶部单个 在创建一个新的activity的时候 ...

  9. mapping 详解5（dynamic mapping）

    概述 在使用 ES 的时,我们不需要事先定义好映射设置就可以直接向索引中导入文档.ES 可以自动实现每个字段的类型检测,并进行 mapping 设置,这个过程就叫动态映射(dynamic mappin ...

  10. 关于JDBC链接数据库的代码实现

    /** * 快速入门 */ @Test public void demo1() { /** * * 1.加载驱动. * * 2.获得连接. * * 3.编写sql执行sql. * * 4.释放资源. ...