函数

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数学揭密之函数与勾股定理的更多相关文章

  1. JavaScript中常用的函数

    javascript函数一共可分为五类:  ·常规函数  ·数组函数  ·日期函数  ·数学函数  ·字符串函数 1.常规函数  javascript常规函数包括以下9个函数:  (1)alert函数 ...

  2. Javascript自执行匿名函数(function() { })()的原理分析

    匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数 下面是一个最常见的自执行函数: // 传统匿名函数 (function() { alert('hell ...

  3. 借助JavaScript中的时间函数改变Html中Table边框的颜色

    借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...

  4. 02.JavaScript 面向对象精要--函数

    在JavaScript中,函数其实也是对象.是函数不同于其他对象的特点是:函数存在一个被称为[[Call]]的内部属性.[[Call]]属性是函数独有的,表明该对象可以被执行.ECMAScript 定 ...

  5. 前端学习 第二弹: JavaScript中的一些函数与对象（1）

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  6. JavaScript学习03 JS函数

    JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...

  7. 理解和使用 JavaScript 中的回调函数

    理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报  分类: JavaScript(4)    目录( ...

  8. JavaScript中变量和函数声明的提升

    现象: 1.在JavaScript中变量和函数的声明会提升到最顶部执行. 2.函数的提升高于变量的提升. 3.函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4.匿名函数不会提升. ...

  9. JavaScript——callback（回调函数

    1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直 ...

随机推荐

  1. 使用opencv自带的融合函数

    [wiki,blog]使用opencv自带的融合函数 [wiki,blog]使用opencv自带的融合函数 /*M/////////////////////////////////////////// ...

  2. linux脚本随笔-01

    #### 获取配置文件配置路径,javapath为配置项,var为具体的配置值 eval $(awk -F "javapath=" '{if($2=="") { ...

  3. SharePoint自动化系列——Manage "Site Subscriptions" using PowerShell

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 你可以将普通的sites加入到你的site subscriptions中,前提是你需要有一个 Te ...

  4. Access SQL中Left Join、Right Join和Inner Join的使用

    1.表结构 表A                                     表B 2.Left Join 示例:2.1 Select * From A left join B on A. ...

  5. jquery uploadify上传插件兼容火狐问题

    jquery uploadify长传插件兼容火狐问题.因为现在火狐以不在默认安装flash插件.所以uploadify的flash版就需要安装flash插件.还可以成功. 可以到哪里下载安装:http ...

  6. 织梦cms PHPcms 帝国cms比较

    现在建网站不需要请程序员从基础的程序开发做起了,有专业的建站工具,CMS是使用最广泛的建站工具.CMS是Content Management System 现在建网站不需要请程序员从基础的程序开发做起 ...

  7. 摩托罗拉SE4500 三星 S3C6410 Wince6.0平台软解码调试记录以及驱动相关问题解释

    虽然S3C6410出来很多年了,甚至于已经停产了,出货的几乎都有依赖于库存,SE4500也出来很多年了,但是网上依旧不会有调试资料帮助你,一切源于自私.希望本文能帮到你,不必感谢.本文来自C.S.D. ...

  8. (1)若当前字符不是大于0的数字字符，则复制该字符于新字符串中； (2)若当前字符是一个数字字符，且它之后没有后继字符，则简单地将它复制到新字符串中； (3)若当前字符是一个大于0的数字字符，并且还有后继字符，设该数字字符的面值为n，将它的后继字符重复复制n+1次到新字符串中； (4)以上述一次变换为一组，在不同组之间另插入一个"_"用于分割（5）)若字符串中包含有下划线'_',则变换为 \UL

    package b; import java.util.Scanner; public class Zifuchuan { public static void main(String[] args) ...

  9. <转>离婚前夜悟出的三件事

    文/铁眼(简书作者)原文链接:http://www.jianshu.com/p/832be4f659a0?utm_campaign=hugo&utm_medium=reader_share&a ...

  10. 通过数据库和EasyUI的combobox级联实现省市区三级联动

    1.新建一个web项目 2.因为这里用到了数据库所以我们在lib目录导入Hibernate的jar包.fastjson.jar包及数据库jar包 3.同样导入EasyUI的组件配置,并在新建的html ...