码迷,mamicode.com
首页 > 其他好文 > 详细

DIV旋转的测试代码

时间:2014-12-16 15:09:06      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   ar   io   for   java   on   div   

<html>
<head>

<style type="text/css">
.rat0 {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
}

.rat1 {
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
}

.rat2 {
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
}

.rat3 {
	-webkit-transform: rotate(-50deg);
	-moz-transform: rotate(-50deg);
}

.rat4 {
	-webkit-transform: rotate(50deg);
	-moz-transform: rotate(50deg);
}
</style>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
var base_len = 100;
var len = 700;



function drawleaf(rat) {
	var hdiv = "<div class='rat" + rat + "'><img src='leaf.png'></div>";
	$("#content").append(hdiv);
}

$(document).ready(function(){
  //$("#content").append(hdiv);
	for(var i=0; i<10; i++) {
		drawleaf( Math.floor(Math.random() * ( 4 + 1)) );
	}
  
});
</script>
<div id="content" width="960" height="800">
</div>
</body>
</html>

旋转的测试代码

参考:

http://blog.csdn.net/wide288/article/details/41960089

DIV旋转的测试代码

标签:style   blog   http   ar   io   for   java   on   div   

原文地址:http://blog.csdn.net/wide288/article/details/41960131

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!