函数勾股定理
什么是函数
- x对应y.
console.log(Math.pow(2,3));//平方或者立方
console.log(Math.sqrt(9));//开方
苹果菜单实例、三角函数
运用的是勾股定理.
需要注意的 obj.style.width输出的是一个字符值.
圆周运动
360°=2π//角度与弧度.
**圆周长/2r =π **
1°=π/180
console.log(Math.sin(30*Math.PI/180));//这是30°对应的弧度
圆周运动原理
<script>
var div1 = document.getElementById('div1');
var radius = 100;//圆的半径
var x = 700;//半径的offsetLeft
var y = 300;//半径的offsetTop
var deg = 0;//表示递增的角度
setInterval(function(){
deg++;
var b = Math.sin(deg*Math.PI/180)*radius;//b边的距离
var a = Math.cos(deg*Math.PI/180)*radius;//a边的距离
div1.style.left = a+x+'px';
div1.style.top = b+y+'px';
var dot = document.createElement('div');
dot.className = 'dot';
dot.style.left = a+x+'px';
dot.style.top = b+y+'px';
document.body.appendChild(dot);
},30);
</script>
三维圆周运动
近大远小
有直接的公式,叫做三维旋转矩阵
img
<script>
var div1 = document.getElementById('div1');
var radius = 100;//圆的半径
var x = 700;//半径的offsetLeft
var y = 300;//半径的offsetTop
var deg = 0;//表示递增的角度
setInterval(function(){
deg++;
var a = Math.sin(deg*Math.PI/180)*radius;//x边的距离
var b = Math.cos(deg*Math.PI/180)*radius;//y边的距离.[cos x 的max=1,min=-1.所以值会在100~-100之间徘徊.]
console.log(b);
div1.style.left = a+x+'px';
// div1.style.top = b+y+'px';
div1.style.width = b*(3/10)+50+'px';
div1.style.height = b*(3/10)+50+'px';
},30);
/*
*
* 三维的变化
*
* 如果想绕Y轴走的话,Y轴的值[也就是TOP值]并没有发生改变.
* - X轴控制物体的Left值.
* - 通过Y轴控制物体的远近[一种模拟].
* */
</script>
反三角函数和265网站实例
-
反三角函数:利用反三角函数,可以求未知的角度||弧度.已知两条边,可以求出角度.
- arcsin a
- arccos a
- arc tan a
JS中的语法
var radian = Math.asin(1/2);
console.log(radian);//求出的值是弧度.
console.log(radian*180/Math.PI);//弧度转化为角度
分析
<script>
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
var r = 5;//表示眼睛活动范围的半径
var L2 = 115; // 表示左眼睛的left值
var T2 = 43; //表示左眼睛的top值
var L3 =135; // 右眼睛的left值
var T3 = 43; // 右眼睛的top值
document.onmousemove = function(ev){
var ev = ev||event;
change(div2,ev.clientX,ev.clientY,L2,T2);
change(div3,ev.clientX,ev.clientY,L3,T3);
function change(obj,x,y,l,t){//(对象,鼠标距离x,鼠标距离y,眼睛left值,眼睛top值,// )
var eyeDistanceTop = obj.offsetTop+obj.parentNode.offsetTop;//眼睛距离上面的距离
var eyeDistanceLeft = obj.offsetLeft+obj.parentNode.offsetLeft;//眼睛距离左边的距离
var changeX = 0;
var changeY = 0;
var b = Math.abs(x-eyeDistanceLeft);//得到b边
var a = Math.abs(y-eyeDistanceTop);//得到a边
if(eyeDistanceLeft>x&&eyeDistanceTop>y){//左上
changeX=Math.sin(Math.atan(b/a))*-r;
changeY = Math.cos(Math.atan(b/a))*-r;
}else if(eyeDistanceLeft<x&&eyeDistanceTop>y){//右上
changeX=Math.sin(Math.atan(b/a))*r;
changeY = Math.cos(Math.atan(b/a))*-r;
}else if(eyeDistanceLeft<x&&eyeDistanceTop<y){//右下
changeX=Math.sin(Math.atan(b/a))*r;
changeY = Math.cos(Math.atan(b/a))*r;
}else if(eyeDistanceLeft>x&&eyeDistanceTop<y){//左下
changeX=Math.sin(Math.atan(b/a))*-r;
changeY = Math.cos(Math.atan(b/a))*r;
}
console.log(changeY);
obj.style.left = l+changeX+'px';
obj.style.top = t+changeY+'px';
}
}
</script>
arcttan2();//如果忽略掉大小写可以考虑这个函数[暂时不懂]
圆的碰撞实例
作业:判断从哪个方向进来的
物理知识:力的分解,速度的分解.速度的合成.能量守恒定律
当两个中心点小于半径之和,他们就碰上了
分解
!!学习力的分解与合成
三角函数图像和流体应用
- 三角函数图像
- 单位圆坐标系
<script>
var div1 = document.getElementById('div1');
var num =0;
var value =100;
var L =100;
var T = 300;
// 需要注意的说,随着角度的越来越来,弧度也是越来越大.并不是与360度有关.
// 弧度控制left值
// sin控制top值
//这样控制,节奏刚刚好
setInterval(function(){
num++;
div1.style.left =L+ (num*Math.PI/180)*value+'px';//角度转弧度又放大100倍
div1.style.top = T-Math.sin(num*Math.PI/180)*value+'px';
console.log((num*Math.PI/180)*value);
var div = document.createElement('div');
div.className = 'box1';
div.style.left = L+ (num*Math.PI/180)*value+'px';
div.style.top = T-Math.sin(num*Math.PI/180)*value+'px';
document.body.appendChild(div);
},30);
</script>
坚果手机效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锤子3d</title>
<style>
*{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
position: fixed;
bottom: -20px;
width: 100%;
}
li{
float: left;
}
img{
width: 100%;
}
#ul1 li img{
transition: transform 1s cubic-bezier(.445,.05,.55,.95);/*设置动画时间*/
}
#ul1 li:nth-of-type(1) img{
transform: translateY(67%);
}
#ul1 li:nth-of-type(2) img{
transform: translateY(47%);
}
#ul1 li:nth-of-type(3) img{
transform: translateY(67%);
}
#ul1 li:nth-of-type(4) img{
transform: translateY(47%);
}
#ul1 li:nth-of-type(5) img{
transform: translateY(27%);
}
#ul1 li:nth-of-type(6) img{
transform: translateY(47%);
}
#ul1 li:nth-of-type(7) img{
transform: translateY(61%);
}
</style>
</head>
<body>
<ul id="ul1">
<li><img src="img/1.png" alt=""></li>
<li><img src="img/2.png" alt=""></li>
<li><img src="img/3.png" alt=""></li>
<li><img src="img/4.png" alt=""></li>
<li><img src="img/5.png" alt=""></li>
<li><img src="img/6.png" alt=""></li>
<li><img src="img/7.png" alt=""></li>
</ul>
<script>
window.onload = function(){
var getUl = document.getElementById('ul1');
var getImg = getUl.getElementsByTagName('img');
var getLi = getUl.getElementsByTagName('li');
for(var i=0;i<getImg.length;i++){ //为每一个Li设置宽度
// 浏览器宽度/7 = 单个的宽度值.单个宽度值/总宽度 = 比例值
getLi[i].style.width = getViewWindowMessage().w/7/getViewWindowMessage().w*100+'%';
}
function getViewWindowMessage(){//获得浏览器视口信息
return {
w:document.documentElement.clientWidth,
h:document.documentElement.clientHeight
};
}
function getOffsetLeft(obj){
var left = 0;
while (obj){
left+=obj.offsetLeft;
obj = obj.offsetParent;
};
return left;
}
//----------------------------------------------------------
var AImgWidth = getUl.offsetWidth/7*5;//5张图片宽度.[受影响的最大范围值]
getUl.onmousemove = function(ev){
for(var j=0;j<getImg.length;j++){
var ev = ev||event;
//中心点x轴到left的距离
var middle = getOffsetLeft(getImg[j])+getImg[j].offsetWidth/2;
//鼠标到每张图片中心点x轴的差值
var distance = Math.abs(ev.clientX - middle);
if(distance>AImgWidth){//如果差值大于AImgWidth.差值就会等于五张图片距离.[到下面就是转换成60%]
distance = AImgWidth;
}
var scale = Math.abs(distance/AImgWidth)*60;//上下比例
// console.log(scale);
getImg[j].style.transform = 'translateY'+'('+scale+'%)';
}
}
}
</script>
</body>
</html>
