zoukankan      html  css  js  c++  java
  • 用两种方法实现一个点绕着另一个点旋转

    用两种方法实现一个点绕着另一个点旋转

    CSS3方法

    DEMO演示

    @keyframes,animation, transform三样便可以搞定

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		#center {
    			10px;
    			height: 10px;
    			border-radius: 5px;
    			background: #000;
    			position: relative;
    			margin: 200px auto;
    		}
    		#dot {
    			 10px;
    			height: 10px;
    			background: red;
    			position: absolute;
    			border-radius: 5px;
    			left: 200px;
    			top: 0;
    
    			-o-transform: rotate(90deg);
    			-moz-transform: rotate(90deg);
    			-webkit-transform: rotate(90deg);
    			-ms-transform: rotate(90deg);
    			transform: rotate(90deg);
    
    			-o-transform-origin: -2000%;
    			-webkit-transform-origin: -2000%;
    			-moz-transform-origin: -2000%;
    			-ms-transform-origin: -2000%;
    			transform-origin: -2000%;
    
    			animation: rot 3s linear 0s infinite;
    			-o-animation: rot 3s linear 0s infinite;
    			-ms-animation: rot 3s linear 0s infinite;
    			-webkit-animation: rot 3s linear 0s infinite;
    			-moz-animation: rot 3s linear 0s infinite;
    		}
    
    		@keyframes rot {
    			from{
    				transform: rotate(0deg);
    			}
    			to{
    				transform: rotate(360deg);
    			}
    		}
    		@-o-keyframes rot {
    			from{
    				-o-transform: rotate(0deg);
    			}
    			to{
    				-o-transform: rotate(360deg);
    			}
    		}
    		@-webkit-keyframes rot {
    			from{
    				-webkit-transform: rotate(0deg);
    			}
    			to{
    				-webkit-transform: rotate(360deg);
    			}
    		}
    		@-moz-keyframes rot {
    			from{
    				-moz-transform: rotate(0deg);
    			}
    			to{
    				-moz-transform: rotate(360deg);
    			}
    		}
    		@-ms-keyframes rot {
    			from{
    				-ms-transform: rotate(0deg);
    			}
    			to{
    				-ms-transform: rotate(360deg);
    			}
    		}
    	</style>
    </head>
    <body>
    	<div id="center">
    		<div id="dot"></div>
    	</div>
    </body>
    </html>
    

    javascript

    DEMO演示

    Math.cos(), Math.sin(),这两个函数的参数都是弧度,所以可以用 Math.PI * 2/360 将角度转化成弧度。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		#center {
    			10px;
    			height: 10px;
    			border-radius: 5px;
    			background: #000;
    			position: relative;
    			margin: 200px auto;
    		}
    		#dot {
    			 10px;
    			height: 10px;
    			background: red;
    			position: absolute;
    			border-radius: 5px;
    			left: 200px;
    			top: 0;
    		}
    	</style>
    </head>
    <body>
    	<div id="center">
    		<div id="dot"></div>
    	</div>
    
    	<script type="text/javascript">
    		var oDot = document.getElementById('dot');
    		var deg = 0;
    		var timer = null;
    		var radius = oDot.offsetLeft; // 旋转半径
    
    		timer = setInterval(function() {
    			var radian = (2*Math.PI/360)*deg;
    			var theTop = Math.ceil(Math.sin(radian)*radius);
    			var theLeft = Math.ceil(Math.cos(radian)*radius);
    			oDot.style.top = theTop + 'px';
    			oDot.style.left = theLeft + 'px';
    			deg += 0.5;
    			if (deg === 361) {
    				deg = 0;
    			}
    		},1);
    	</script>
    </body>
    </html>
  • 相关阅读:
    jq:翻页时,保存上页多选框checkbox选中状态
    SpringMVC日期类型转换问题处理方法归纳
    SpringMVC的Date与String互转
    使用AJAX异步提交表单的几种方式
    ORACLE——日期时间格式化参数详解 之三
    ORACLE——日期时间格式化参数详解 之一
    ORACLE——日期时间格式化参数详解 之二
    Json-lib 进行java与json字符串转换之二
    Json-lib 进行java与json字符串转换之一
    java继承-子类调用父类的方法中包含子类重写的方法
  • 原文地址:https://www.cnblogs.com/zhongshanblog/p/4710402.html
Copyright © 2011-2022 走看看