JS实现生成会变大变小的圆环实例
更新时间：2015年08月05日 12:06:09 作者：皮蛋
这篇文章主要介绍了JS实现生成会变大变小的圆环,涉及javascript数学运算及页面样式动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现生成会变大变小的圆环。分享给大家供大家参考。具体如下：
这里使用javascript生成圆环，会变大变小，对于研究如何利用JavaScript生成动画效果，这是个很好的范例。
运行效果如下图所示：
具体代码如下：
<!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>
<style>
#div1 {width:2px; height:2px; position:absolute; background:red; left:150px; top:200px;}
div {width:3px; height:3px; position:absolute; background:black;}
</style>
<title>JS圆环</title>
<script type="text/javascript">
var n=30;
var r=100;
var a=true;
window.onload=function ()
{
var oDiv1=document.getElementById('div1');
var aDiv=[];
var oDiv=null;
var j=0;
var i=0;
for(i=0;i<n;i++)
{
oDiv=document.createElement('div');
aDiv.push(oDiv);
document.body.appendChild(oDiv);
}
calcDrg();
function calcDrg()
{
for(i=0;i<n;i++)
{
var degress=360*i/n+j;
var a=Math.sin(degress*Math.PI/180)*r;
var b=Math.cos(degress*Math.PI/180)*r;
aDiv[i].style.left=oDiv1.offsetLeft+b+'px';
aDiv[i].style.top=oDiv1.offsetTop-a+'px';
}
}
setInterval(function (){
j++;
var s=0.3;
a?r-=s:r+=s;
if(r<=0 || r>=100)
{
a=!a;
}
calcDrg();
}, 10);
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
偶尔发现 js 中有个延时加载的标签 defer,还在疑惑这么好用的东西为什么没有流行起来,本人今天把它拾起来用了一下，发现只在ie7，8，9和360安全济览器下可以，知道为什么不用它了吧2012-12-12
这篇文章主要为大家详细介绍了微信小程序表单弹窗实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
mouseover ,mouseout ,mouseenter,mouseleave，都是鼠标点击而触发的事件，各自代表什么意思，有哪些区别呢？下面跟着脚本之家小编一起看看吧2015-10-10
这篇文章主要介绍了关于数据与后端进行交流匹配(点亮星星) 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
这篇文章主要介绍了微信小程序封装网络请求和拦截器实战步骤，这样可以提高开发效率，减少代码重复，同时也可以提高代码的可维护性和可读性2023-03-03
这篇文章主要介绍了深入浅出es6模板字符串,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本篇文章是JS的一个网页制作小技巧，应用在很多地方，通过JS改变HTML页面的颜色，有兴趣的学习下。2018-02-02
今天小编就为大家分享一篇layui动态绑定事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JavaScript图像放大镜效果实现方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
From表单组件具有数据收集、提交数据的功能,某种程度上说它就是一个容器,下面这篇文章主要给大家介绍了关于uniapp表单验证的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
最新评论