js实现椭圆轨迹_利用js实现div画椭圆曲线运动特效代码
*{
margin:0px;padding:0px;
}
div{
border:1px solid #111;
}
.points{
width:1px;height:1px;border:0px solid #111;
position:absolute;
line-height:1px;font-size:1px;
background:#111;
}
.go-oval{
width:10px;height:10px;border:0px solid #111;
position:absolute;
line-height:1px;font-size:1px;
background:#111;
border-radius:5px;
}
(function(){
function $(idd){
var obj = {};
if( typeof( idd ) === 'string'){
var idName = idd.substr(1, idd.length );
//alert(idName)
if( idd.substr(0,1) === '#' ){
obj = document.getElementById(idName);
}
else if( idd.substr(0,1) === '.'){
obj = document.getElementsByName(idName);
//obj = obj.length ? document.getElementsByClassName(idName) : null;
//alert(obj.length);
//alert( obj[0].className )
}
else if( idd == 'document' ){
obj = document;
}
else {
obj = document.getElementsByTagName(idd);
//alert(idd)
}
}
else {
obj = idd;
}
return obj;
}
//alert(document.body.clientWidth )
//生成椭圆曲线的点(数组)
function make_points(a, b, interval, addX, addY){
var x,y;
var xy = [],xy1 = [],xy2 = [];
addX = addX ? addX : a;
addY = addY ? addY : b;
x = - Math.sqrt( (b*b)*a*a/(b*b) );
for(var n = 0; 1; n ++){
y = Math.sqrt( b*b - (b*b*x*x)/(a*a) );
if( n == 0 ){
y0 = y;
}
xy1[n] = [x + addX,y + addY];
//n++;
xy2[n] = [x + addX,-y + addY];
x = x + interval;
if( x > Math.sqrt( (b*b)*a*a/(b*b) ) ){
break;
}
}
//xy2倒序
/*
xy2 = xy2.sort(function(x,y){
return x == y ? 0 : (x > y ? -1 : 1);
});
*/
for(var n = 0, n2 = len = xy2.length - 1 ; n <= len; n ++, n2--){
xy[n] = xy2[n2];
}
xy = xy1.concat(xy);
return xy;
}
//画椭圆曲线
function draw_oval(points){
var len = points.length;
var divs = '';
for(var n = 0; n < len; n ++){
divs += '
}
return divs;
}
//沿着曲线跑动
function go_oval(idd,points, n, t, addX, addY){
var len = points.length;
n = n ? n : 0;
t = t ? t : 10;
addX = addX ? addX : 0;
addY = addY ? addY : 0;
var $obj = $(idd).style;
$obj.left = points[n][0] + addX + 'px';
$obj.top = points[n][1] + addY + 'px';
n ++;
n = n == len ? 0 : n;
setTimeout(function(){
go_oval(idd, points, n, t, addX, addY);
},t);
}
window.onload = function(){
var points1 = make_points(50,100,1,200,200);
var points2 = make_points(200,100,1);
//画椭圆曲线
$('#tuoyuan1').innerHTML = draw_oval( points1 );
$('#tuoyuan2').innerHTML = draw_oval( points2 );
//alert( make_points(200,100,3) )
//小点在曲线上跑动
go_oval('#go-oval1',points1,0,10 ,-5,-5);
go_oval('#go-oval2',points2,0,10 ,-5,-5);
};
})();
js实现椭圆轨迹_利用js实现div画椭圆曲线运动特效代码相关推荐
- js实现椭圆轨迹_【CSON原创】javascript椭圆旋转相册发布
功能说明: 1.支持自动和手动两种模式:自动模式下自动旋转展示,手动模式下通过鼠标选择当前图片,或通过提供的接口选择上一张/下一张图片. 2.可自行添加旋转的缓动模式,默认模式为:匀速,先快后慢,先慢 ...
- js获取classname值_利用js获取元素class值的两种方法
我们有时为了达到某种效果,需要以元素的class值为条件做判断. 我们如何利用JavaScript获取元素class的值?我们先看下面代码: x=document.getElementsByTagNa ...
- python椭圆面积_利用matplotlib实现2个椭圆的重叠区域
你不能用matplotlib来计算交集的面积(至少据我所知不是这样),但是你可以用shapely来计算,然后用matplotlib将结果可视化.下面是一个快速演示:from matplotlib im ...
- java模拟电脑体育彩票的随机选号_利用JS来模拟体育彩票选号器
利用JS来模拟体育彩票选号器_网页代码站(www.webdm.cn) function Quickpick() { var ball for( ball = 0; ball < 5; ball+ ...
- 网页设计图片向上浮动_利用js实现图片在浏览器中飘动(浮动窗口自由移动)效果...
首先,设置一个将要飘动的窗口,html代码如下: 利用js控制span标签在浏览器内移动 var xPos = 0;var yPos = 0; var step = 1;var delay = 10; ...
- js 万年历农历转阳历 方法_利用JS制作万年历的方法
本篇文章主要介绍了利用JS制作万年历的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网 ...
- java利用监听器制作红绿灯_利用js实现简易红绿灯
HTML代码: 在一个div容器内,设置3个span CSS代码: .red_light { width: 200px; height: 200px; border-radius: 50%; marg ...
- js 模拟点击_爬虫js逆向之无限debugger--抖音第三方数据分析平台的坑
爬虫js逆向系列 我会把做爬虫过程中,遇到的所有js逆向的问题分类展示出来,以现象,解决思路,以及代码实现,这三方面解析,供大家参考爬虫认知 在程序猿所有的方向中,爬虫是离money最近的一个方向,你 ...
- jsx怎么往js里传参数_给js文件传参数(详解)
一.利用全局变量 这是最简单的一种方式,比如Google Adsense: 缺点是引入了全局变量.其中引入文件的方式还有两个变体: // 变体1:用document.write输出 document. ...
- html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查 ...
最新文章
- 使用Combox控件的一个问题
- 在子线程中弹土司的一段代码
- leetcode算法题--复数乘法
- zoj3988 二分图匹配
- 抽象工厂类--一个简单的例子
- DXperience,不能不爱
- Go服务迁到K8s后老抽风重启? 记一次完整的线上问题解决过程
- Oracle中的wmsys.wm_concat
- 三维重建 几何方法 深度学习_基于深度学习的视觉三维重建研究总结
- apc php7,深入解析php之apc
- C++ opengl GL_LINE_STRIP的绘制
- 写在开通博客的第一天
- nmap 扫描工具 使用方法
- Ubuntu调整CPU程序调度和CPU频率的几种方法
- iAd框架详细解析 —— ASM
- DataBinding 的集成:点击AIL+Enter , 没有出现【convert to data binding layout】怎么办?
- python实现添加商品至购物车
- 我的webgl学习之路(一)
- eclipse 主类中明明有main方法且没有写成mian,还老是提示找不到main方法。
- 多元线性回归的梯度下降