On the understanding of the non-coincident motion trajectory of the point around the ring

Source: Internet
Author: User

An understanding of the non-coincident motion trajectory of a point around a ring 1. Why not coincident

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 Solve

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/1.png "width=" "height=" "style=" margin:0px auto; padding:0px;font-family:simsun;font-size:medium;white-space:normal; "/>

3. Another understanding

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/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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.