实例讲解Javascript实现可旋转的圆圈
程序员文章站
2022-03-19 21:29:08
...
本文实例讲述了Javascript实现可旋转的圆圈。分享给大家供大家参考。具体如下：
这里基于Javascript实现会旋转的圆圈，有点三维变幻的效果，立体感很强，代码主要是基于JS，学习Js脚本编程来说，是个学习JS生成动画的好范例。
运行效果如下图所示：
具体代码如下：
<html>
<head>
<title>旋转的圆圈</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<script language="JavaScript">
amount=ybase=15;
Color="#ffaaff";
GlowColor="#ff00ff";
xbase=-70;
step=c=0.05;
TrigSplit=360/amount;
xpos=ypos=currStep=Ci=0;
for (i=0; i < amount; i++)
document.write("<p id="p" style="position:absolute;top:0px;left:0px;height:20;width:20;text-align:center"><B>.</B></p>");
function running(){
var MY=document.body.scrollTop+document.body.clientHeight/2 + document.body.clientHeight/2.8*Math.cos((Ci)/4)*Math.cos(Ci/10);
var MX=document.body.scrollLeft+document.body.clientWidth/2 + document.body.clientWidth/2.4*Math.sin((Ci)/6)*Math.sin(Ci/20);
ypos=MY;
xpos=MX;
for (i=0; i < amount; i++){
var d=p[i].style;
if (d.pixelTop > ypos+2){
d.fontSize=18;
d.paddingTop=7;
d.filter="glow(color="+GlowColor+", strength=7)";
if (d.pixelTop > ypos+10){
d.fontSize=15;
d.paddingTop=10;
d.filter="glow(color="+GlowColor+", strength=5)";
}
}
else{
d.fontSize=25;
d.paddingTop=0;
d.color=Color;
d.filter="glow(color="+GlowColor+", strength=8)";
}
d.top=ypos+ybase*Math.sin(currStep+i*TrigSplit*Math.PI/180);
d.left=xpos+xbase*Math.cos(currStep+i*TrigSplit*Math.PI/180);
}
Ci+=c;
currStep+=step;
setTimeout("running()",20);
}
running();
</script>
</body>
</html>
以上就是实例讲解Javascript实现可旋转的圆圈的详细内容，更多请关注其它相关文章！
推荐阅读
-
javascript实现数字配对游戏的实例讲解
-
JavaScript实现简单的双色球(实例讲解)
-
JavaScript实现继承的六种方式实例讲解
-
原生javascript实现文件异步上传的实例讲解
-
JavaScript for-in遍历,ES6的for-of遍历,可迭代对象的forEach()方法实例讲解
-
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例_javascript技巧
-
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例_javascript技巧
-
javascript实现按钮颜色渐变效果的实例讲解
-
JS实现可改变列宽的table实例_javascript技巧
-
JavaScript实现简单的双色球(实例讲解)