<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
/*
* Draw a Oval
* author:李英夫, Thanks for 袁洲's help in math.
* The following is the formula of Oval.
* All dots is drawn by it.
* x = r*a*cosθ (0 <= θ <= 2π)
* y = r*b*sinθ (0 <= θ <= 2π)
* b*b + r*r = a*a //Pythagoras Theorem
*/
var Circle = {
centre_of_circle : {x:200,y:200},
radius : 12,
dot : function(x,y,w){
return "<div id='dot_"+x+y+"' style='display:none;font-size:0;width:"+w+"px;height:"+w+"px;position:absolute;background-color:#000;top:"+(y)+"px;left:"+(x)+"px'></div>";
},
draw : function(){
var dots = 300,
a = 15,
b = 9,
dotsArr = [];
for(var i = 0; i < dots; i++){
var x = Circle.centre_of_circle.x+Circle.radius*Math.cos(i*2*Math.PI/dots)*a;
var y = Circle.centre_of_circle.y+Circle.radius*Math.sin(i*2*Math.PI/dots)*b;
dotsArr.push({"y":y,"x":x});
}
return dotsArr;
},
words : function(aObjArr){
var s = "";
s += "<a href='"+aObjArr.href+"' target='_blank' style='position:absolute;' id='a_"+aObjArr.id+"'>"+aObjArr.str+"</a>";
return s;
}
}
window.onload = function(){
var dots = Circle.draw();
var count = 0;
document.body.innerHTML = Circle.words({href:"http://www.baidu.com",id:dots[count].x+""+dots[count].y,str:"baidu"});
var style = document.getElementById("a_"+dots[count].x+""+dots[count].y).style;
var t = window.setInterval(function(){
with(style){
top = dots[count].y+"px";
left = dots[count].x+"px";
fontSize = (dots[count].y/10)+"px"
}
count++;
if(count >= dots.length){
count = 0;
}
},1);
}
</script>
</head>
<body>
</body>
</html>
分享到：
相关推荐
使用javascript实现一组图片或者div按照椭圆轨迹运动，鼠标移入停止运动，鼠标移出开始运行。
在MATLAB编程环境中，"椭圆轨迹绘制"是一个常见的图形绘制任务，特别是在物理、工程或者数学的学习和研究中。这个程序使用了等弦差法，这是一种几何方法，用于精确地描绘出椭圆的轮廓。接下来，我们将深入探讨椭圆、...
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）中使用PathListBox来实现复杂的轨迹旋转动画，特别是椭圆轨迹动画。WPF是.NET Framework 4.0引入的一个强大的UI框架，它提供了丰富的图形渲染...
在Windows Forms（Winform）开发中，实现图片的椭圆轨迹轮换以及图片变形效果是一项有趣且具有挑战性的任务。这个功能通常用于创建动态展示、动画或者艺术效果。以下将详细解析这一技术实现的关键知识点： 1. **...
在Android开发中，实现"图片按椭圆轨迹移动"的功能是一项常见的动画效果需求，它可以为用户界面增添动态美感。这个功能通常应用于各种应用场景，比如游戏、应用启动页或者是交互式的UI设计。以下将详细讲解如何在...
该文档介绍了一种椭圆轨迹生成器的制作方法，它主要解决了现有椭圆轨迹生成器在生成小半径椭圆时可能出现的干涉和运动不畅问题，以及长半轴和短半轴关联调整不便的问题。该创新设计依据椭圆参数方程进行改进，通过...
将这两者结合起来，我们可以构建一个系统来跟踪物体沿椭圆轨迹的运动。首先，根据物体的初始位置和速度，以及椭圆的参数（半长轴和半短轴），我们可以建立椭圆运动的数学模型。然后，利用传感器（如摄像头或雷达）...
"tuoyuannihe.rar"这个压缩包文件可能包含了用于椭圆拟合的相关代码或算法，帮助用户根据离散点数据找出椭圆轨迹。现在，我们将深入探讨椭圆拟合及其在相关领域的应用。 椭圆拟合是数学和计算机科学中的一个概念，...
没法用3d实现只能转向2d了，只要实现按椭圆旋转就ok了 X轴Y轴在一个矩形内移动 路径为斜线 .ball { animation: animX 2s linear infinite alternate, animY 2s linear infinite alternate } @keyframes animX{...
本示例中，我们探讨的主题是如何实现“椭圆轨迹旋转”以及“3D翻书效果”的特效。这两种技术能够为Android应用增添生动有趣的视觉元素，提高用户体验。 首先，让我们深入了解一下“椭圆轨迹旋转”效果。在Android中...
椭圆轨迹和直线轨迹是两种常见的基础轨迹类型，它们可以用于各种不同的应用场景。 2. **控制理论**：机器人轨迹跟踪的核心是控制策略。常见的有PID（比例-积分-微分）控制，它通过调整Kp（比例增益）、Ki（积分增益...
前言：最近公司项目有个需求，需要实现让一个view沿着椭圆轨迹做动画，效果实现后，就自己封装做了一个小demo，使用更方便。先看效果： 椭圆.gif 效果图中的白色椭圆轨迹线其实是用贝塞尔曲线画出来的，为了清晰的...
在MATLAB程序的辅助下，研究者能够对椭圆轨迹中的长轴和短轴长度、振动频率以及相位差等参数进行精确的模拟和调整。这些参数的优化能够使刀具在加工过程中的作用点更加分散，减少了刀具磨损，提高了切削效率，同时也...
李文妹、姜晨等研究者提出了一种二维超声椭圆振动轨迹跟踪控制算法，该算法的目标是确保在整个加工过程中，振动轨迹与加工点的法向相对姿态保持一致。为了达到这一目标，算法首先确定工件表面各加工点的法向姿态，这...
椭圆的绘制相对复杂，因为Canvas API没有直接提供椭圆绘制方法。我们可以使用`arc()`方法画圆，然后通过调整坐标和大小来模拟椭圆。这里有一个通用的方法来绘制椭圆： ```javascript function drawEllipse(ctx, x, ...
在iOS开发中，让控件沿椭圆路径旋转是一种实现独特动画效果的技术。这通常涉及到对Core Animation框架的深入理解，以及对图形上下文（Graphics Context）和贝塞尔曲线（Bezier Path）的运用。以下是对这个主题的详细...
本教程将详细介绍如何利用Axure实现汽车在指定轨迹上的移动行走效果，帮助你创建更加生动、逼真的交互原型。 首先，理解"轨迹移动"的概念。在数字产品设计中，轨迹移动通常指的是元素按照预设路径进行动画展示，...
本实例源程序主要关注的是如何使用C#来绘制圆、椭圆以及圆弧，这对于理解Windows Forms和GDI+库的使用非常有帮助。在ASP.NET框架下，虽然主要用于构建Web应用，但其底层原理也涉及到C#语言，因此这些基础知识同样...