# 关于QQ空间按钮背景图片转圈效果

0

QQ空间按钮，当鼠标滑上去时，图片会180转一圈，然后停止，请问，有谁知道，这个原理是在呢吗实现的吗？

<li>

<a href="#">

<span><img src=".."></span>

</a>

</li>

icepy | 小虾三级 | 园豆：587

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>`

artwl | 专家六级 |园豆：16736 | 2012-01-11 14:59

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);    }`

Sharp_Knife | 园豆：24 (初学一级) | 2012-01-11 10:44
`pic_id 是传的什么参数？`

@xiangwenwen: pic_id 应该是图片元素的id，如<img id='cnblogs' src='http://www.cnblogs.com/images/logo.jpg'/> cnblogs就是pic_id

您需要登录以后才能回答，未注册用户请先注册