<!DOCTYPE HTML>
|
<html>
|
<head>
|
<meta charset=UTF-8>
|
<title>YuGiOh</title>
|
<style type="text/css">
|
#div {
|
position: absolute;
|
top: 50px;
|
left: 300px;
|
width: 300px;
|
height: 300px;
|
line-height: 300px;
|
text-align: center;
|
border: 1px solid black;
|
}
|
</style>
|
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
|
<script type="text/javascript">
|
var rotateHTML5 = function (limit)
|
{
|
var reg = /(rotate\([\-\+]?((\d+)(deg))\))/i;
|
var wt = div.style['-webkit-transform'], wts = wt.match (reg);
|
var $2 = RegExp.$2;
|
console.log ($2);
|
div.style['-webkit-transform'] = wt.replace ($2, parseFloat (RegExp.$3) + limit + RegExp.$4);
|
}
|
|
var rotateIE = function (obj)
|
{
|
var d = !!obj.d ? obj.d : 1;
|
var r = d * Math.PI / 180;
|
costheta = Math.cos (r);
|
sintheta = Math.sin (r);
|
obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";
|
var item = obj.filters.item (0);
|
var width = obj.clientWidth;
|
var height = obj.clientHeight;
|
item.DX = -width / 2 * costheta + height / 2 * sintheta + width / 2;
|
item.DY = -width / 2 * sintheta - height / 2 * costheta + height / 2;
|
item.M11 = costheta;
|
item.M12 = -sintheta;
|
item.M21 = sintheta;
|
item.M22 = costheta;
|
obj.timer = setTimeout (function ()
|
{
|
var dx = d + 1;
|
dx = dx > 360 ? 1 : dx;
|
obj.d = dx;
|
rotate (obj, dx);
|
}, 30);
|
};
|
|
var start = function ()
|
{
|
if (!!div.interval)
|
{
|
clearInterval (div.interval);
|
delete div.interval;
|
}
|
else
|
{
|
div.interval = setInterval (function ()
|
{
|
/.*webkit.*/i.test (navigator.userAgent) ? rotateHTML5 (1) : rotateIE (div);
|
}, 30);
|
}
|
}
|
</script>
|
</head>
|
<body>
|
<button onclick="start();">rotate</button>
|
<div id="div" style="border-radius: 90px; -webkit-transform: rotate(10deg);">ROTATE</div>
|
</body>
|
</html>
|
