您的位置：首页 > 其它

利用Math.atan2()方法判别方向显示移动的效果

2017-05-31 00:00 351 查看
摘要: http://www.yibaixun.com/中有一个效果，鼠标从图片进过时遮罩层不间断的移动，当然这个移动只是让人在肉眼上看着像是在移动，但是实际上是另外一回事，F12看了一下源代码实现过程挺简单的，主要用到了Math.atan2()的方法

Math.atan2()

返回正切值为两个指定数字的商的角度。

Math.atan2()接受两个参数x和y,方法如下:
angel=Math.atan2(y,x)
x 指定点的 x 坐标的数字。
y 指定点的 y 坐标的数字。
计算出来的结果angel是一个弧度值,也可以表示相对直角三角形对角的角，其中 x 是临边边长，而 y 是对边边长。
下面我们来测试一下这两个函数:
x=Math.atan(1)//计算正切值为1的数字对应的弧度值
trace(x) //输出一个弧度值0.785398163397448
x=180*x/Math.PI//转换为角度值
trace(x) //输出45
x=Math.atan2(7,7)
trace(x)//输出0.785398163397448
x=180*x/Math.PI//转换为角度值
trace(x)//输出45
x=Math.atan2(7,-7)
trace(x)2.35619449019234
x=180*x/Math.PI//转换为角度值
trace(x)135
x=Math.atan2(-7,7)
trace(x)//输出-0.785398163397448
x=180*x/Math.PI//转换为角度值
trace(x)//输出-45
x=Math.atan2(-7,-7)
trace(x)//输出-2.35619449019234
x=180*x/Math.PI//转换为角度值
trace(x)//输出-135
//从这些测试可以看出,通过坐标系的自动调整,我们可以很自由的计算出处于不同象限的位置相对应的角度.
3、计算两点间连线的倾斜角.
这种方法非常的有用.
Math.atan2()函数返回点(x,y)和原点(0,0)之间直线的倾斜角.那么如何计算任意两点间直线的倾斜角呢?只需要将两点x,y坐标分别相减得到一个新的点(x2-x1,y2-y1).然后利用他求出角度就可以了.使用下面的一个转换可以实现计算出两点间连线的夹角.
Math.atan2(y2-y1,x2-x1)
不过这样我们得到的是一个弧度值,在一般情况下我们需要把它转换为一个角度.
下面我们用一段代码来测试一下这样的转换.
//测试,计算点(3,3)和(5,5)构成的连线的夹角
x=Math.atan2(5-3,5-3)
trace(x)//输出0.785398163397448
x=x*180/Math.PI//转换为角度
trace(x)//输出45

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>遮罩层的移动效果</title>
<style type="text/css">
.wrapper{margin-top: 50px;width: 100%;}
.case_list{ width: 100%;list-style: none;margin: 0px;padding: 0px;clear:both;}
.case_list .guweshow{list-style-type: none;float: left;width: 25%;}
.case_list .guweshow a{
display: block; width: 100%; position: relative; text-decoration: none; color: #fefefe; overflow: hidden; }
.case_list .guweshow a img{width: 100%; vertical-align: middle; }
.case_list .guweshow a .wenzi{position: absolute; left: 0; top: 100%; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.wenzi h2{margin-top: 30%; text-decoration: underline; padding:0 10px; }
.wenzi h1{text-align: center; }
.wenzi p{padding:0 10px; }
</style>
</head>
<body>
<div class="wrapper">
<ul class="case_list">
<li class="guweshow">
<a href="">
<img src="img/1.jpg">
<div class="wenzi">
<h2>企业游戏</h2>
<h1>猪猪侠—五灵锁前传</h1>
<p>玩家玩家可以通过消除方块的方式，控制英雄进行技能施放，攻击敌人，闯过难关</p>
</div>
</a>
</li>
<li class="guweshow">
<a href="">
<img src="img/2.jpg">
<div class="wenzi">
<h2>企业游戏</h2>
<h1>超级火柴人</h1>
<p>游戏中融入了RPG游戏元素与拼图元素，考验玩家在规定时间内操作角色移动，以及对巧妙拼图的技巧。</p>
</div>
</a>
</li>
<li class="guweshow">
<a href="">
<img src="img/3.jpg">
<div class="wenzi">
<h2>企业游戏</h2>
<h1>战争之王</h1>
<p>在游戏场景中，玩家可以派遣自己的兵种，抵御敌方的多线进攻。玩家需要根据地方的兵种类型，派遣对应克制的兵种</p>
</div>
</a>
</li>
<li class="guweshow">
<a href="">
<img src="img/4.jpg">
<div class="wenzi">
<h2>企业游戏</h2>
<h1>猪猪侠地下迷宫</h1>
<p>游戏总共设定30个关卡，只有打通了当前关卡才能挑战下一关，从第8关开始，需要累计10星、25星、50星才能获得后续相应关卡挑战资格</p>
</div>
</a>
</li>
<li class="guweshow">
<a href="">
<img src="img/5.jpg">
<div class="wenzi">
<h2>企业游戏</h2>
<h1>球球快跑</h1>
<p>游戏中玩家可以使用三名角色作为主角来进行疯狂刺激的跑酷冒险，操作角色跳跃躲避敌人和障碍，努力让角色跑得更远是游戏的基础玩法</p>
</div>
</a>
</li>
<li class="guweshow">
<a href="">
<img src="img/6.jpg">
<div class="wenzi">
<h2>企业游戏</h2>
<h1>大数据</h1>
<p> IPTV现有数据来源纷杂，“孤岛”现象严重，客户数据缺乏统一的分析系统，数据较为离散</p>
</div>
</a>
</li>
<li class="guweshow">
<a href="">
<img src="img/7.jpg">
<div class="wenzi">
<h2>企业游戏</h2>
<h1>逗逗迪迪-奥运球王</h1>
<p>游戏中用户操作逗逗和迪迪参加篮球和足球比赛</p>
</div>
</a>
</li>
<li class="guweshow">
<a href="">
<img src="img/2.jpg">
<div class="wenzi">
<h2>企业游戏</h2>
<h1>战争之王</h1>
<p>在游戏场景中，玩家可以派遣自己的兵种，抵御敌方的多线进攻。玩家需要根据地方的兵种类型，派遣对应克制的兵种</p>
</div>
</a>
</li>
</ul>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.case_list a').mouseenter(function(ev){
// alert(11);
var direc = direction($(this),ev);
switch(direc){
case 'left':
$('.wenzi').css({left:'-100%', top:'0px'}); break;
case 'right':
$('.wenzi').css({left:'100%', top:'0px'}); break;
case 'top':
$('.wenzi').css({left:'0px', top:'-100%'}); break;
case 'bottom':
$('.wenzi').css({left:'0px', top:'100%'}); break;
}
$(this).find('.wenzi').stop().animate({left:'0px', top:'0px'},500)
})
$('.case_list a').mouseleave(function(ev) {
var direc = direction($(this),ev);
switch(direc){
case 'left':
$(this).find('.wenzi').stop().animate({left:'-100%', top:'0px'}); break;
case 'top':
$(this).find('.wenzi').stop().animate({left:'0px', top:'-100%'}); break;
case 'bottom':
$(this).find('.wenzi').stop().animate({left:'0px', top:'100%'}); break;
case 'right':
$(this).find('.wenzi').stop().animate({left:'100%', top:'0px'}); break;
}
});
})
function direction(obj,ev){
//计算元素的尺寸
var w=obj.width();
var  h=obj.height();
//计算鼠标点击的坐标
var x = ev.pageX - obj.offset().left-(w/2);
var y = ev.pageY - obj.offset().top-(h/2);

//计算鼠标的角度
var angle = Math.atan2(y, x)*(180/Math.PI);
//left时，angle的取值范围
if(angle>135 || angle<-135){
var direction = 'left';
//bottom时，angle的取值范围
}else if(angle>45){
var direction = 'bottom';
//right时，angle的取值范围
}else if(angle>-45){
var direction = 'right';
//top时，angle的取值范围
}else{
var direction = 'top';
}
//返回当前从哪个方向进入
return direction;
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Math.atan2()
相关文章推荐
新的分享
章节导航