Javascript实现可旋转的圆圈实例代码
更新时间：2015年08月04日 13:06:59 作者：皮蛋
这篇文章主要介绍了Javascript实现可旋转的圆圈实例代码,可实现圆圈的旋转与运动效果,涉及javascript动态操作页面元素属性及进行相应数学运算的技巧,需要的朋友可以参考下
本文实例讲述了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('<div id="Div" style="position:absolute;top:0px;left:0px;height:20;width:20;text-align:center"><B>.</B></div>');
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=Div[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程序设计有所帮助。
相关文章
这篇文章主要介绍了微信小程序开发之录音机 音频播放 动画实例 (真机可用)，这里整理了详细的代码,有需要的小伙伴可以参考下。2016-12-12
这篇文章主要介绍了javascript控制图片播放的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-08-08
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
这篇文章主要介绍了纯JS实现的读取excel文件内容功能,结合实例形式分析了基于js相关插件进行Excel文件读取的相关操作技巧,需要的朋友可以参考下2018-06-06
做输入校验的时候如果你前端框架用的是bootstrap的话，首推bootstrapValidator校验方式，下面通过本文给大家分享下校验流程，一起看看吧2016-12-12
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
这篇文章主要介绍了webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
数据包围着我们。虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加，但人们发现可视化是更容易理解的一种方式。今年初，SitePoint 发表了 Aurelio 的文章《 Chart.js简介》。在深入研究 Chart.js 的功能后，本文将会讲解这篇简介的一些重点。2015-10-10
这篇文章主要介绍了微信小程序时间控件picker view的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
JavaScript提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”。本文主要带大家了解一下JavaScript中你必须了解的属性描述对象，需要的可以参考一下2022-12-12
逻辑赋值是对现有数学和二进制逻辑运算符的扩展。我们先复习一下，然后看看把它们结合在一起能得到什么，感兴趣的小伙伴可以跟随小编一起学习一下2022-11-11
这篇文章主要为大家详细介绍了JavaScript Canvas编写炫彩的网页时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
最新评论