首页 新闻 搜索 专区 学院

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

0
悬赏园豆:30 [已解决问题] 解决于 2012-02-22 11:40

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

问题补充:

谁能详细说说,它实现的原理,我想知道这个。

<li>

<a href="#">

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

</a>

</li>

怎么实现这个img图片180度转圈,是更改src属性吗?还是怎么做?

icepy的主页 icepy | 小虾三级 | 园豆:587
提问于:2012-01-11 10:35
< >
分享
最佳答案
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
artwl | 专家六级 |园豆:16526 | 2012-01-11 14:59
其他回答(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
Sharp_Knife | 园豆:24 (初学一级) | 2012-01-11 10:44
pic_id 是传的什么参数?
支持(0) 反对(0) icepy | 园豆:587 (小虾三级) | 2012-01-11 11:23

可不可以详细解释说说这段脚本,

支持(0) 反对(0) icepy | 园豆:587 (小虾三级) | 2012-01-11 11:25

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

支持(0) 反对(0) artwl | 园豆:16526 (专家六级) | 2012-01-11 14:33
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册