jquery图片旋转问题
functionshow(){$("#cao").rotate(i);setTimeout("show()",1);}图片怎么才会按照图片中心旋转呢，还有就是我这么写会卡...
function show(){ $("#cao").rotate(i); setTimeout("show()",1);} 图片怎么才会按照图片中心旋转呢，还有就是我这么写会卡死。。。。。
展开
2个回答
展开全部
$("#cao").rotate(i);这里rotate方法是什么？jquery没有这个方法吧。
<img src="a.png" />
$(function () {
var degrees = 0;
var $elie = $("img");
function rotate() {
++degrees;
if (degrees > 360) {
degrees = 0;
}
$elie.css({
'-webkit-transform': 'rotate(' + degrees + 'deg)',
'-moz-transform': 'rotate(' + degrees + 'deg)',
'-ms-transform': 'rotate(' + degrees + 'deg)',
'-o-transform': 'rotate(' + degrees + 'deg)',
'transform': 'rotate(' + degrees + 'deg)'
});
setTimeout(rotate, 50);
}
rotate($elie, 45);
});
<img src="a.png" />
$(function () {
var degrees = 0;
var $elie = $("img");
function rotate() {
++degrees;
if (degrees > 360) {
degrees = 0;
}
$elie.css({
'-webkit-transform': 'rotate(' + degrees + 'deg)',
'-moz-transform': 'rotate(' + degrees + 'deg)',
'-ms-transform': 'rotate(' + degrees + 'deg)',
'-o-transform': 'rotate(' + degrees + 'deg)',
'transform': 'rotate(' + degrees + 'deg)'
});
setTimeout(rotate, 50);
}
rotate($elie, 45);
});
追答
那你可以试试下面的plugin
(不敢直接发链接，不好意思)
plugins点jquery点com/jqrotate/
写了个demo
codepen。io、anon、pen、EoGaD
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
html5 中有旋转效果 在chrome浏览器中能预览成功
<script type="text/javascript">
function startup() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = newImage();
img.src = 'Penguins.jpg';
img.onload = function() {
ctx.translate(img.width / 2, img.height / 2);
ctx.rotate(30 * Math.PI / 180);
ctx.drawImage(img, 0, 0, 164, 164);
}
}
</script>
<body onload='startup();'>
<div id="pw_body"style="width:100%;height:100%">
<canvas id="canvas"style="position: absolute; left: 300px; top: 300px;"width="800"height="600"></canvas>
</div>
</body>
<script type="text/javascript">
function startup() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = newImage();
img.src = 'Penguins.jpg';
img.onload = function() {
ctx.translate(img.width / 2, img.height / 2);
ctx.rotate(30 * Math.PI / 180);
ctx.drawImage(img, 0, 0, 164, 164);
}
}
</script>
<body onload='startup();'>
<div id="pw_body"style="width:100%;height:100%">
<canvas id="canvas"style="position: absolute; left: 300px; top: 300px;"width="800"height="600"></canvas>
</div>
</body>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
