js实现椭圆运动轨迹

在网上看到一个flash实现椭圆运动轨迹，效果不错，试着用js实现，功能实现不是很完善，希望对学习js的朋友有所帮助。

查看演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.object{

}{

position:absolute; width:89px; height:89px

}

</style>

</head>

<body>

</body>

function Move(x,y,a,b)//自定义移动类

{

this.uid="move_"+Math.random();

this.uid = this.uid.replace(".","");

eval(this.uid+"=this;");

this._x=x;

this._y=y;

this._a=a;

this._b=b;

this.items=[];

this.dxrad=0.05;

}

Move.prototype.setPostion=function(obj,rad)//设置对象位置

{

obj.style.left=this._a*Math.cos(rad)+this._x+"px";

obj.style.top=this._b*Math.sin(rad)+this._y+"px";

if(Math.sin(rad)>0) obj.style.zIndex=3;

else obj.style.zIndex=2;

}

Move.prototype.setAlpha=function(obj,rad)

{//设定透明度

var p =(Math.sin(rad) < 0) ? 2*this._a-Math.abs(this._a*Math.cos(rad)) :this._a*Math.abs(Math.cos(rad));

p =100-40*p/this._a+20;

obj.style.filter='alpha(opacity='+p+')';

obj.style.opacity=p/100;

}

Move.prototype.play=function(n)//根据轨迹运动

{

for(var i=0;i<this.items.length;i++)

{

this.setPostion(this.items[i],2*Math.PI*i/n+this.dxrad);

this.setAlpha(this.items[i],2*Math.PI*i/n+this.dxrad);

}

this.dxrad=this.dxrad+0.03;

if(this.dxrad>=Math.PI) this.dxrad=this.dxrad-Math.PI;

window.setTimeout(this.uid+".play("+n+")",120);

}

Move.prototype.init=function(n)

{

for(var i=1;i<=n;i++)

{

var img = new Image();

img.src = "https://p-blog.csdn.net/images/p_blog_csdn_net/ghtyan/object.jpg";

img.className="object";

this.items[i-1]=img;

this.setPostion(img,2*Math.PI*i/n);

this.setAlpha(img,2*Math.PI*i/n);

document.body.appendChild(img);

//img.οnclick=function(){alert(this.style.zIndex)};

}

this.play(n);

}

var move = new Move(450,300,300,80);

move.init(8);

</script>

</html>

转载于:https://www.cnblogs.com/ghtyan/archive/2007/08/13/js.html

js实现椭圆运动轨迹相关推荐

Unity物体绕圆运动-轨迹
using UnityEngine; using System.Collections;public class zhuan : MonoBehaviour {public Transform sun ...
javascript-按圆形排列DIV元素(三)实例---- 图片按椭圆形转动
$(this).css({"left":Math.sin((ahd*index+ainhd))*radius+dotLeft,"top":Math.cos((a ...
C4D搭配动画效果（二）
上一章讲述了如何利用C4D图切割制作闪光效果.本章将讲述如何在上章文章描述的效果基础上加入椭圆动态效果以及闪动控制. 如下图所示,椭圆运动主要分成两部分:外圈运动.内圈运动.其中内圈运动看似一个椭圆, ...
百度地图 js 在安卓端手指缩放无效_利用百度地图绘制3D轨迹演示
简介百度地图很强大,也为开发者提供很好的开发接口.今天用3D地图上路线轨迹可视化的小功能. 使用第一步:申请ak ak申请介绍创建的时候选择浏览器端~ 第二步:填写ak 有了 ak 后,复制下面 ...
基于Leaflet实现路径轨迹回放功能
效果图: 说明: 1.该功能是在这篇博客基础上完成的:ArcGIS JS API 实现路径轨迹回放但是里面有点小问题:首先,小车并不是匀速运动的,而是每一段的运行时间固定,所以在该博客上进行了修改 ...
极验第四代滑块验证码破解（三）：滑块轨迹构造
极验第四代滑块验证码破解(三):滑块轨迹构造声明一.极验滑动轨迹分析 1. 生成滑动轨迹的js入口 2. 滑动轨迹的python实现二.结语 *本期文章结束啦,如果对您有帮助,记得收藏加关注哦, ...
LUA中测试鱼死亡动作、炸弹轨迹、炸弹爆炸动作
Fish.lua: --[[ ------------------------------------ 一条鱼 ------------------------------------ Ivan_ha ...
Vue对高德地图2.0的封装使用
在Vue项目里使用高德地图,网上有几个比较好用的,例如 AMap-Vue ,文档很好,但不开源 vue-amap ,文档让人流泪懒人和需求不复杂的,可以直接使用上面的.上面两开源的已经不太活跃了,用 ...
经纬度坐标转换高斯-克吕格平面坐标
文章目录前言主要代码使用示例参考链接原作者链接:https://blog.csdn.net/jianyi7659/article/details/7583339 前言支持将地理坐标(经纬度 ...

js实现椭圆运动轨迹

js实现椭圆运动轨迹相关推荐

最新文章

热门文章