关于QQ空间按钮背景图片转圈效果
0
最佳答案
0
再提供一个代码：
<!DOCTYPE html>
<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>
其实要想真正跨浏览器可以用两张图片做，上面的方法要浏览器支持canvas才行
收获园豆：20
其他回答(1)
0
不说废话，上代码
直接调用类似pic_rotate(pic_id,90);//顺时间90度
var total_myangle=0;
function pic_rotate(pic_id,angle){
if(angle!=361) total_myangle+=angle;
else{
total_myangle=0;
}
total_myangle=total_myangle%360;
this.angle = total_myangle;
if (this.angle >= 0){
var rotation = Math.PI * this.angle / 180;
} else {
var rotation = Math.PI * (360+this.angle) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.all && !window.opera){
var canvas = document.createElement('img');
canvas.src = pic_id.src;
canvas.height = pic_id.height;
canvas.width = pic_id.width;
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
} else {
var canvas = document.createElement('canvas');
if (!pic_id.oImage) {
canvas.oImage = new Image();
canvas.oImage.src = pic_id.src;
} else {
canvas.oImage = pic_id.oImage;
}
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);
var context = canvas.getContext('2d');
context.save();
if (rotation <= Math.PI/2){
context.translate(sintheta*canvas.oImage.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*canvas.oImage.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*canvas.oImage.width,canvas.height);
} else {
context.translate(0,-sintheta*canvas.oImage.width);
}
context.rotate(rotation);
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
context.restore();
}
canvas.id = pic_id.id;
canvas.angle = pic_id.angle;
pic_id.parentNode.replaceChild(canvas, pic_id);
}
收获园豆：10
pic_id 是传的什么参数？
可不可以详细解释说说这段脚本，
@xiangwenwen: pic_id 应该是图片元素的id，如<img id='cnblogs' src='http://www.cnblogs.com/images/logo.jpg'/> cnblogs就是pic_id
