javascript多个圆点弧线运动效果
发布在前端菜鸟2016年7月19日view:1471BrettBatJavaScript原型
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

enter image description here <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>javascript多个圆点弧线运动效果</title> <style> *{margin:0; padding:0;}

box{width:300px; height:300px; border:1px solid #000; margin:100px auto; position:relative; top:0; left:0; border-radius:50%;text-align:center;line-height:300px;color:#000;font-size:20px;}

box span{ position:absolute; top:0; left:50%; margin-left:-25px; margin-top:-25px; width:50px; height:50px; background:red; border-radius:50%; }

</style>

<script> function d2a(n){ return n*Math.PI/180; } window.onload=function(){ var oBox=document.getElementById("box"); var R=oBox.offsetWidth/2; var timer=null; var n=10; for(var i=0;i<n;i++){ var oSpan=document.createElement("span"); oBox.appendChild(oSpan); } var aS=oBox.children var off=true; oBox.onclick=function(){ if(off){ for(var i=0;i<aS.length;i++){ move(aS[i],360/n*i); } }else{ for(var i=0;i<aS.length;i++){ move(aS[i],0); } } off=!off; } function move(obj,iTarget){ var cont=Math.floor(700/30); var start=obj.a||0; var dis=iTarget-start; var m=0; clearInterval(obj.timer); obj.timer=setInterval(function(){ m++; var b=1-m/cont; var cur=start+dis*(1-Math.pow(b,3)); obj.a=cur; var x=R+Math.sin(d2a(cur))*R; var y=R-Math.cos(d2a(cur))*R; obj.style.left=x+"px"; obj.style.top=y+"px"; if(m==cont){ clearInterval(obj.timer) } },30) } } </script>
</head>
<body>
    <div id="box">
        点击
    </div>
</body>

</html>

前端菜鸟分享:javascript多个圆点弧线运动效果

评论
发表评论
1年前

欢迎大家加入—极乐问答平台,一个提供给开发者的技术

交流平台。

技术交流群—JavaScript问答交流群 Java问答交流群 Android开发问答交流群 iOS开发问答交流群 欢迎加入!

1年前
赞了此文章!
1年前
添加了一枚【评注】:>欢迎大家加入—[极乐问答平台](http://www.dreawer.com/),一个提供给开发者的技术 交流平台。 >技术交流群—[JavaScript问答交流群](http://jq.qq.com/?_wv=1027&k=2IpW3RL) [Java问答交流群](http://jq.qq.com/?_wv=1027&k=29qxbHX) [Android开发问答交流群](http://jq.qq.com/?_wv=1027&k=2A5vyqc) [iOS开发问答交流群](http://jq.qq.com/?_wv=1027&k=2ArRZ5C) 欢迎加入!
WRITTEN BY
前端菜鸟
前端菜鸟是为前端初学者提供div+css、html5+css3、JavaScript、jquery、前端web开发、移动端html5开发集一体的前端知识以及前端资讯网站!
TA的新浪微博
PUBLISHED IN
前端菜鸟

和大家共同交流javascript技术

我的收藏