圆周运动js
2015-08-18 17:07
555 查看
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circlar movement</title>
<style type="text/css">
#circle{width:30px;height:30px;position: absolute;background-color: lightgreen;left:600px;top:250px;border-radius: 50%;}
</style>
<script type="text/javascript">
window.onload=function(){
var oCircle=document.getElementById('circle');
var x=500;
var y=200;
var r=100;
var num=0;
setInterval(function(){
num++;
a=Math.sin(num*(Math.PI/180))*r;
b=Math.cos(num*(Math.PI/180))*r;
oCircle.style.left=x+b+'px';
oCircle.style.top=y+a+'px';
},35);
}
</script>
</head>
<body>
<div id="circle"></div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circlar movement</title>
<style type="text/css">
#circle{width:30px;height:30px;position: absolute;background-color: lightgreen;left:600px;top:250px;border-radius: 50%;}
</style>
<script type="text/javascript">
window.onload=function(){
var oCircle=document.getElementById('circle');
var x=500;
var y=200;
var r=100;
var num=0;
setInterval(function(){
num++;
a=Math.sin(num*(Math.PI/180))*r;
b=Math.cos(num*(Math.PI/180))*r;
oCircle.style.left=x+b+'px';
oCircle.style.top=y+a+'px';
},35);
}
</script>
</head>
<body>
<div id="circle"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS图片的放大与缩小
- JavaScript 对象
- 滚动条滚动事件 js
- 关于JS堆栈与拷贝
- 学习zepto.js(对象方法)[3]
- 省市区三级联动JS
- javascript
- 百度地图JS调用示例
- js中对Ajax使用解析与重构
- javascript函数 第14节
- JS学习十九天----组合模式
- Javascript实现瀑布流
- Javascript中的DOM实现显示鼠标的空间位置
- js实现带有介绍的Select列表菜单实例
- javascript学习笔记（一）-廖雪峰教程
- pjsip_iphone（1）初探
- javascript 模式(2)——单例模式
- js 个人整理的兼容性代码
- javascript +.net 构建restful API 应用
- JSON技术-Gson将bean转换json确保数据的正确，使用FastJson将Json转换Bean