650) this.width=650; "Src=" Http://127.0.0.1:8020/TZ-%E7%82%B9%E7%BB%95%E5%9C%86%E8%BF%90%E5%8A%A8%E8%BD%A8%E8%BF %b9%e6%9c%aa%e9%87%8d%e5%90%88%e7%9a%84%e7%90%86%e8%a7%a3/2.png "width=" "height=" "style=" margin:0px auto; padding:0px;font-family:simsun;font-size:medium;white-space:normal; "/>
2. How to Solve650) this.width=650; "Src=" Http://127.0.0.1:8020/TZ-%E7%82%B9%E7%BB%95%E5%9C%86%E8%BF%90%E5%8A%A8%E8%BD%A8%E8%BF %b9%e6%9c%aa%e9%87%8d%e5%90%88%e7%9a%84%e7%90%86%e8%a7%a3/1.png "width=" "height=" "style=" margin:0px auto; padding:0px;font-family:simsun;font-size:medium;white-space:normal; "/>
3. Another understanding650) this.width=650; "Src=" Http://127.0.0.1:8020/TZ-%E7%82%B9%E7%BB%95%E5%9C%86%E8%BF%90%E5%8A%A8%E8%BD%A8%E8%BF %b9%e6%9c%aa%e9%87%8d%e5%90%88%e7%9a%84%e7%90%86%e8%a7%a3/3.png "width=" "height=" "style=" margin:0px auto; padding:0px;font-family:simsun;font-size:medium;white-space:normal; "/>
4. Final implementation (for the sake of seeming coordination, add the Border-radius attribute to the animated div)650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/73/8E/wKioL1YBCOShAmVIAABkQFEfDpU821.jpg "title=" 11-1. PNG "alt=" wkiol1ybcoshamviaabkqfefdpu821.jpg "/>
The following is the source code:
----------------------------------------------
<!doctype html>
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<title> understanding of the non-coincident motion trajectory of a point-circle ring </title>
<meta name= "keywords" content= "keywords, key words" >
<meta name= "description" content= "" >
<title>process bar</title>
<style>
*{margin:0;padding:0;}
H1,h3,p{text-align:center;}
h1{padding:20px;}
img{display:block;margin:0 Auto;}
#box {width:200px;height:200px;margin:20px auto;position:relative;}
#cycle {width:180px;height:180px;border-radius:50%;border:10px solid red;}
. Movediv{position:absolute;width:10px;height:10px;background: #fff; border-radius:50%;}
</style>
<body>
<div id= "box" >
<div id= "Cycle" ></div>
</div>
</body>
<script>
Window.onload = function () {
var movedom = document.createelement ("div");
Movedom.classname = "Movediv";
var cycledom = document.getElementById ("cycle");
Cycledom.appendchild (Movedom);
var speed = 0.2;
var start = 0;
var r = 96;
var timer = setinterval (function () {
Start + = speed;
var left = 100+parseint (start) -5;//minus half the width of the animated Div, so the div is centered on the x-axis
var top = 100+parseint (R*math.sin (start)) -5;//minus half the height of the animated Div, so the div is centered on the Y axis
var left = 100-5+parseint (start);//The X-axis of the circle minus half the width of the animation Div, which coincides with the center of the circle horizontally
var top = 100-5+parseint (start), or the y-axis of the center minus half the height of the animated Div, which coincides with the center of the circle in the vertical direction
MoveDom.style.top = top+ "px";
MoveDom.style.left = left+ "px";
},50);
};
</script>
This article is from the "Wennuanyiran" blog, make sure to keep this source http://dingzhaoqiang.blog.51cto.com/5601059/1697115
On the understanding of the non-coincident motion trajectory of the point around the ring
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
