js是一门应用极其广泛的语言，它直接决定着一个前端工程师水平以及工资的高低，今天，本人这个前端菜鸟就来总结写js怎样结合数学进行应用。
一：结合勾股定理进行苹果菜单的开发
首先来介绍几个常用的公式
1：平方公式 Math.pow(a,b);代表的是a的b次方；
2：开方公式 Math.sqrt(a,b)代表的是a开b次方；
下面就以苹果实例的开发来讲述其应用
这是html代码
1 <input typ="text"> 2 <input typ="text"> 3 <input typ="text"> 4 <input typ="text"> 5 <input typ="text"> 6 <div id="div1"> 7 <img src="img/1.png" /> 8 <img src="img/2.png" /> 9 <img src="img/3.png" /> 10 <img src="img/4.png" /> 11 <img src="img/5.png" /> 12 </div>
这个是简单的css代码
1 * { 2 margin: 0px; 3 padding: 0px; 4 } 5 #div1 { 6 position: absolute; 7 bottom: 0px; 8 text-align: center; 9 100%; 10 } 11 img { 12 64px; 13 }
上面你的两种都很简单，下面就介绍本次的最重要的js代码
<script> window.onload=function(){ var oInput=document.getElementsByTagName("input"); var oDiv=document.getElementById("div1"); var oImg=oDiv.getElementsByTagName("img"); document.onmousemove=function(ev){ var ev=ev||window.event; for(var i=0;i<oImg.length;i++){ var a=oImg[i].offsetLeft+oImg[i].offsetWidth/2; var b=oImg[i].offsetTop+oImg[i].offsetHeight/2+oDiv.offsetTop; var x=ev.clientX-a; var y=ev.clientY-b; var c=Math.sqrt(Math.pow(x,2)+Math.pow(y,2)) var scale=1-c/300; if(scale<0.5){ scale=0.5 } oInput[i].value=scale; oImg[i].style.width=scale*128+"px"; oImg[i].style.height=scale*128+"px"; } } } </script>
实现完上述的代码之后就会显示出下面的实例效果
当鼠标距离那个比较近，就会将图片以一定的比例放大，由于这里没办法显示的太明显，只能讲图片将就着这么显示。但是方法是一样的
二：js与三角函数的结合
1：正弦函数 Math.sin();
2: 余弦函数Math.cos();
html代码，使用该代码就能写出一个物体从围绕着y轴进行圆周运动的实例。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 { 8 20px; 9 height: 20px; 10 background: red; 11 position: absolute; 12 top: 300px; 13 left: 800px; 14 } 15 .box{border:1px solid #000;position:absolute;} 16 </style> 17 <script> 18 window.onload=function(){ 19 var oDiv=document.getElementById("div1"); 20 var r=100; 21 var x=700; 22 var y=300; 23 num=0; 24 setInterval(function(){ 25 num++; 26 var a=Math.sin(num*Math.PI/180)*r; 27 var b=Math.cos(num*Math.PI/180)*r; 28 29 oDiv.style.left=b+x+"px"; 30 oDiv.style.width=a/100*30+50+"px"; 31 oDiv.style.height=a/100*30+50+"px"; 32 },30) 33 34 } 35 36 </script> 37 </head> 38 39 <body> 40 <div id="div1"></div> 41 </body> 42 </html>