风扇式旋转加拖拽

59580
59580 发布于 2017-01-09 14:02:22 浏览:974 类型:原创 - 随笔 分类:JavaScript - JavaScript 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>拖拽并旋转</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			#div1 {
				width: 200px;
				height: 200px;
				background: yellow;
				position: absolute;
				border-radius: 100px;
				/*设置旋转秒数*/
				transition: transform 5s;
			}
			
			#div1 div {
				width: 100px;
				height: 100px;
				float: left;
				border-radius: 50px;
				background: white;
			}
			
			#div1:hover {
				/*开始旋转 (360*12圈)4320deg(度) */
				transform: rotate(4320deg);
			}
		</style>
		<script>
			window.onload = function() {
				var oDiv = document.getElementById('div1');
				var x = 0;
				var y = 0;
				oDiv.onmousedown = function(ev) {
					var oEvent = ev || event;
					x = oEvent.clientX - oDiv.offsetLeft;
					y = oEvent.clientY - oDiv.offsetTop;
					document.onmousemove = function(ev) {
						var oEvent = ev || event;
						var l = oEvent.clientX - x;
						var t = oEvent.clientY - y;
						var doc = document.documentElement;
						if(l < 0) {
							l = 0;
						} else if(l > (doc.clientWidth - oDiv.offsetWidth)) {
							l = doc.clientWidth - oDiv.offsetWidth;
						}
						if(t < 0) {
							t = 0;
						} else if(t > (doc.clientHeight - oDiv.offsetHeight)) {
							t = doc.clientHeight - oDiv.offsetHeight;
						}
						oDiv.style.left = l + 'px';
						oDiv.style.top = t + 'px';
					}
					document.onmouseup = function() {
						document.onmousemove = null;
						document.onmouseup = null;
					}
					return false;
				}

			}
		</script>
	</head>

	<body>
		<div id="div1">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>

</html>
标签:
z
给个赞 11 人点赞
收藏 14 人收藏
评论 已有 4 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
hinong
hinong2017-01-13 09:31:504F
这菊花貌似还能左右转
举报 支持 (0) 回复 (0)
陈陈陈大文
陈陈陈大文2017-01-12 20:02:103F
这是一朵会动的菊花
举报 支持 (0) 回复 (0)
ddvbbk
ddvbbk2017-01-12 16:02:112F
炫酷
举报 支持 (0) 回复 (0)
晓晓的麦兜兜
晓晓的麦兜兜2017-01-12 10:26:521F
真不错,赞
举报 支持 (0) 回复 (0)
59580 59580 作者

作者最新