JS實現(xiàn)生成會變大變小的圓環(huán)實例
更新時間：2015年08月05日 12:06:09 作者：皮蛋
這篇文章主要介紹了JS實現(xiàn)生成會變大變小的圓環(huán),涉及javascript數(shù)學(xué)運算及頁面樣式動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)生成會變大變小的圓環(huán)。分享給大家供大家參考。具體如下：
這里使用javascript生成圓環(huán)，會變大變小，對于研究如何利用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圓環(huán)</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程序設(shè)計有所幫助。
相關(guān)文章
偶爾發(fā)現(xiàn) js 中有個延時加載的標簽 defer,還在疑惑這么好用的東西為什么沒有流行起來,本人今天把它拾起來用了一下，發(fā)現(xiàn)只在ie7，8，9和360安全濟覽器下可以，知道為什么不用它了吧2012-12-12
這篇文章主要為大家詳細介紹了微信小程序表單彈窗實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
關(guān)于事件mouseover ,mouseout ,mouseenter,mouseleave的區(qū)別
mouseover ,mouseout ,mouseenter,mouseleave，都是鼠標點擊而觸發(fā)的事件，各自代表什么意思，有哪些區(qū)別呢？下面跟著腳本之家小編一起看看吧2015-10-10
關(guān)于數(shù)據(jù)與后端進行交流匹配(點亮星星)
這篇文章主要介紹了關(guān)于數(shù)據(jù)與后端進行交流匹配(點亮星星) 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
微信小程序封裝網(wǎng)絡(luò)請求和攔截器實戰(zhàn)步驟
這篇文章主要介紹了微信小程序封裝網(wǎng)絡(luò)請求和攔截器實戰(zhàn)步驟，這樣可以提高開發(fā)效率，減少代碼重復(fù)，同時也可以提高代碼的可維護性和可讀性2023-03-03
這篇文章主要介紹了深入淺出es6模板字符串,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本篇文章是JS的一個網(wǎng)頁制作小技巧，應(yīng)用在很多地方，通過JS改變HTML頁面的顏色，有興趣的學(xué)習(xí)下。2018-02-02
今天小編就為大家分享一篇layui動態(tài)綁定事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JavaScript圖像放大鏡效果實現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
From表單組件具有數(shù)據(jù)收集、提交數(shù)據(jù)的功能,某種程度上說它就是一個容器,下面這篇文章主要給大家介紹了關(guān)于uniapp表單驗證的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10