js如何样图片旋转
日期：2014-05-16 浏览次数：20424 次
js怎么样图片旋转？在线等
想用js做一个让图片旋转，每点击一次旋转45度角，看了网上面的文章，图片都是没有动态的感觉，马上就变成了45度角。我的想法是应该要用循环做，每次旋转1个角度就是一个图片，45度就是45张图片，所以图片的大小要很小。我看到一个例子比较好，但是里面的js代码看不太明白，自己做的时候总是有问题，不能根据自己的需要修改里面的代码。
这个是例子的网站：http://www.walterzorn.com/rotate_img/rotate_img.htm
要的是上面那里小脸的效果，就是每次点的时候旋转45度角。
问题解决了就结贴！在线等
------解决方案--------------------
每次旋转1度，转45次
setInterval方法，达到指定度数后clearInterval
------解决方案--------------------
<html>
<head>
<title></title>
<script type="text/javascript">
function rotateImage() {
imageToRotate = document.getElementById('imgRotate');
imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
window.setTimeout("rotate()",100);
}
var imageToRotate;
var degreeToRotate=0;
function rotate(){
var deg2radians = Math.PI * 2 / 360;
degreeToRotate++;
degreeToRotate=degreeToRotate%360;
rad = degreeToRotate * deg2radians ;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
imageToRotate.filters.item(0).M11 = costheta;
imageToRotate.filters.item(0).M12 = -sintheta;
imageToRotate.filters.item(0).M21 = sintheta;
imageToRotate.filters.item(0).M22 = costheta;
window.setTimeout("rotate()",100);
}
</script>
</head>
<body onload="rotateImage();">
<br />
<canvas id="canvas" width="800" height="600">
<img id="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" />
</canvas>
</body>
</html>
想用js做一个让图片旋转，每点击一次旋转45度角，看了网上面的文章，图片都是没有动态的感觉，马上就变成了45度角。我的想法是应该要用循环做，每次旋转1个角度就是一个图片，45度就是45张图片，所以图片的大小要很小。我看到一个例子比较好，但是里面的js代码看不太明白，自己做的时候总是有问题，不能根据自己的需要修改里面的代码。
这个是例子的网站：http://www.walterzorn.com/rotate_img/rotate_img.htm
要的是上面那里小脸的效果，就是每次点的时候旋转45度角。
问题解决了就结贴！在线等
------解决方案--------------------
每次旋转1度，转45次
setInterval方法，达到指定度数后clearInterval
------解决方案--------------------
<html>
<head>
<title></title>
<script type="text/javascript">
function rotateImage() {
imageToRotate = document.getElementById('imgRotate');
imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
window.setTimeout("rotate()",100);
}
var imageToRotate;
var degreeToRotate=0;
function rotate(){
var deg2radians = Math.PI * 2 / 360;
degreeToRotate++;
degreeToRotate=degreeToRotate%360;
rad = degreeToRotate * deg2radians ;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
imageToRotate.filters.item(0).M11 = costheta;
imageToRotate.filters.item(0).M12 = -sintheta;
imageToRotate.filters.item(0).M21 = sintheta;
imageToRotate.filters.item(0).M22 = costheta;
window.setTimeout("rotate()",100);
}
</script>
</head>
<body onload="rotateImage();">
<br />
<canvas id="canvas" width="800" height="600">
<img id="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" />
</canvas>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
