JavaScript数学揭密之函数与勾股定理
函数
function show(n){
return n*2;
}
alert( show(2) ); //
alert( show(3) ); //
alert( show(4) ); //
勾股定理
可以实现两点坐标求距离的应用
JS中的平方和开方
Math.pow(2,3) //2的立方 Math.pow(3,2) //3的平方 Math.sqrt( 9 ) // alert( Math.sqrt( Math.pow(3,2) + Math.pow(4,2) ) ); //这就是勾股定理
使用勾股定理计算两点之间的距离,从而实现类似苹果菜单的案例
原理是检测鼠标的位置,然后计算鼠标跟图片的距离,距离最近的图片最大,距离最远的图片最小
<style>
*{ margin:0; padding:0;}
#div1{ width:100%; position:absolute; bottom:0; text-align:center;}
img{ width:64px;}
</style>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oDiv = document.getElementById('div1');
var aImg = oDiv.getElementsByTagName('img'); document.onmousemove = function(ev){
var ev = ev || window.event; for(var i=0;i<aImg.length;i++){ //图片距离页面左边边界的距离+每张图片的宽度的一半 这里不用加上div距离页面左边边界的距离,因为宽度是百分百的,距离就为零
var x = aImg[i].offsetLeft + aImg[i].offsetWidth/2;
//图片距离页面上边边界的距离+每张图片的宽度的一半+加上div距离页面上边边界的距离
var y = aImg[i].offsetTop + aImg[i].offsetHeight/2 + oDiv.offsetTop; var b = ev.clientX - x;//鼠标坐标的位置减去图片中心点坐标的位置 水平边的
var a = ev.clientY - y;//鼠标坐标的位置减去图片中心点坐标的位置 垂直边的 var c = Math.sqrt(Math.pow(b,2) + Math.pow(a,2));//知道两条直角边 获取第三条边的长度,也就是勾股定理 //使鼠标距离图片越近这个值就越大
var scale = 1 - c/300; if(scale<0.5){
scale = 0.5;
} aInput[i].value = scale; aImg[i].style.width = scale * 128 + 'px';
aImg[i].style.height = scale * 128 + 'px';
}
};
};
</script>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<div id="div1">
<img src="img/1.png">
<img src="img/2.png">
<img src="img/3.png">
<img src="img/4.png">
<img src="img/5.png">
</div>
</body>
JavaScript数学揭密之函数与勾股定理的更多相关文章
- JavaScript中常用的函数
javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数 1.常规函数 javascript常规函数包括以下9个函数: (1)alert函数 ...
- Javascript自执行匿名函数(function() { })()的原理分析
匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数 下面是一个最常见的自执行函数: // 传统匿名函数 (function() { alert('hell ...
- 借助JavaScript中的时间函数改变Html中Table边框的颜色
借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...
- 02.JavaScript 面向对象精要--函数
在JavaScript中,函数其实也是对象.是函数不同于其他对象的特点是:函数存在一个被称为[[Call]]的内部属性.[[Call]]属性是函数独有的,表明该对象可以被执行.ECMAScript 定 ...
- 前端学习 第二弹: JavaScript中的一些函数与对象(1)
前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...
- JavaScript学习03 JS函数
JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...
- 理解和使用 JavaScript 中的回调函数
理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报 分类: JavaScript(4) 目录( ...
- JavaScript中变量和函数声明的提升
现象: 1.在JavaScript中变量和函数的声明会提升到最顶部执行. 2.函数的提升高于变量的提升. 3.函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4.匿名函数不会提升. ...
- JavaScript——callback(回调函数
1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直 ...
随机推荐
- vs2013的asp.net 管理
iisexpress.exe /path:C:\Windows\Microsoft.NET\Framework64\v4.0.30319\ASP.NETWebAdminFiles /vpath:/AS ...
- Train Problem I 分类: HDU 2015-06-26 11:27 10人阅读 评论(0) 收藏
Train Problem I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- Git学习笔记03--git reset
摘自<Git权威指南> Git reset 是Git最常用的命令之一,也是最危险最容易误用的命令. 用法一:git reset [-q] [<commit>] [--] < ...
- Combox控件初始化项的技巧
有时候combox下拉项就是几条固定的,不需要做数据绑定,但是如果直接采用字符串集合编辑器的时候,SelectedValue貌似会不起作用. 于是简单的封装一下 /// <summary> ...
- SharePoint自动化系列——Select-option标签的定位方法总结
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ C#中通过Selenium定位页面上的select-option结构,尝试了以下几种方法,均没有生 ...
- exp函数
第一种是tensor用exp函数 th> a [torch.DoubleTensor of size 1x3] [.0002s] th> a:exp() 2.7183 2.7183 1.0 ...
- dot函数和*的区别
dot函数是常规的矩阵相乘 *是特殊的乘法 import numpy as np a = [[1,2,3],[4,5,6]] a = np.array(a) b = [[1,2],[4,5],[3,6 ...
- java中split()特殊符号"." "|" "*" "\" "]"
关于点的问题是用string.split("[.]") 解决. 关于竖线的问题用 string.split("\\|")解决. 关于星号的问题用 string. ...
- Android 内存分析工具 - LogCat GC
一.GC_Reason 触发垃圾回收的回收的集中原因: 类型 描述 GC_CONCURRENT 内存使用将满时,并发的进行垃圾回收. GC_FOR_MALLOC 当内存已满应用尝试分配内存时会出触发垃 ...
- collections在java中的常见用法
1. 工具类collections用于操作集合类,如List,Set,常用方法有: 1) 排序(Sort) 使用sort方法可以根据元素的自然顺序 对指定列表按升序进行排序.列表中的所有元素都必须实现 ...