当前位置： 代码迷 >> Web前端 >> 两种图片360渡旋转方法的比较
  详细解决方案

两种图片360渡旋转方法的比较

热度：312   发布时间：2013-01-19 11:41:36.0
两种图片360度旋转方法的比较

两种方式实现图片滚动，其中运用jquery插件的可兼容多种浏览器：

1：运用jquery插件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script src="jQueryRotate.2.2.js"></script>
<style>
/*jquery插件=>http://code.google.com/p/jqueryrotate/*/
*{
? margin:0;
? padding:0;
}
#div1{
? position:relative;
? background-image:url(circle1.png);
? background-repeat:no-repeat;
? width:264px;
? height:264px;
? margin-left:100px;
? margin-top:100px;
}
.div3{
? position:absolute;
? background-repeat:no-repeat;
? width:264px;
? height:264px;
? top:0;
? left:0;
}
.div2{
? position:absolute;
}

#inner{
? position:absolute;
? width:80px;
? height:80px;
? display:block;
? left:90px;
? top:90px;
? color:#fff;
? font-weight:bold;
? text-align:center;
? padding-top:10px;
}
#inner .span1{
? font-size:16px;
}
#inner .span2{
? font-size:30px;
? display:block;
? padding-top:10px;
}

</style>
</head>

<body>
<div id="div1">
? <div class="div3">
??? <img id="img1" src="circle2.png" />
? </div>
? <div class="div2">
??? <!--利用map，area对图形的中不规则图形进行分割，可用dreamweaver进行调整-->
??? <img src="circle4.png" usemap="#map1" style="border:none;" />
??? <map name="map1" id="map1">
? ?? <area shape="poly" coords="85,74,57,116,3,106,17,64,44,29" alt="1" href="#"/>
????? <area shape="poly" coords="58,120,67,167,16,195,0,151,2,110" alt="1" href="#"/>
????? <area shape="poly" coords="104,203,85,251,44,230,16,199,67,169" alt="1" href="#"/>
????? <area shape="poly" coords="175,253,128,260,90,252,107,204,158,204" alt="1" href="#"/>
????? <area shape="poly" coords="245,197,216,230,180,252,160,202,197,169" alt="1" href="#"/>
????? <area shape="poly" coords="260,109,260,160,247,195,198,166,207,119" alt="1" href="#"/>
????? <area shape="poly" coords="216,29,247,69,261,105,206,116,179,74" alt="1" href="#"/>
????? <area shape="poly" coords="134,1,176,6,215,29,177,73,130,57" alt="1" href="#"/>
????? <area shape="poly" coords="46,27,83,7,133,1,131,58,83,71" alt="1" href="#"/>
??? </map>
? </div>
? <div id="inner">
???? <span class="span1">零食特产</span>
? <span class="span2">5%</span>
? </div>
</div>
<div id="t"></div>
<script>
/*
*? 仿一淘-全网今日热门类目价格变化幅度；
*? ie8,ff，opera中可用，其他浏览器未测；
*? ********made by keimon*********
*? **********2013-01-15***********
*/
$(function(){
//显示在图片中间的文字；
var data = [
{name:'家具日用',percent:'15.0%'},
{name:'零食特产',percent:'-9.9%'},
{name:'奶粉',percent:'7.7%'},
{name:'生活电器',percent:'8.8%'},
{name:'数码配件',percent:'2.2%'},
{name:'美容护肤',percent:'3.3%'},
{name:'服饰配件',percent:'4.4%'},
{name:'箱包皮具',percent:'5.5%'},
{name:'家装主材',percent:'6.6%'}
]
?? var len = $('area').length;
?? for(var i=0; i<len; i++){
????? $('area').mouseenter(function(){
????? var that = this;
????? var index = $('area').index(that);
??
?? var degree = 340-(index*40+30);
?? var sinNum = Math.sin(degree);
?? var cosNum = Math.cos(degree);
?? $('#img1').rotate(degree);//运用jQueryRotate.2.2.js实现图片旋转；注意：ie下只能进行图片旋转；
??
?? $('#inner .span1').html(data[index].name);
?? $('#inner .span2').html(data[index].percent);
?? })
?? }
?? $('#img1').rotate(30);
})
</script>
</body>

</html>

?

2：运用ff运用css3，及ie运用filter；opera暂不能兼容；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
? margin:0;
? padding:0;
}
#div1{
? position:relative;
? background-image:url(circle1.png);
? background-repeat:no-repeat;
? width:264px;
? height:264px;
? margin-left:100px;
? margin-top:100px;
}
.div3{
? position:absolute;
? background-repeat:no-repeat;
? background-image:url(circle2.png);
? width:264px;
? height:264px;
}
.div2{
? position:absolute;
}

/*css旋转，参考：http://blog.csdn.net/jcx5083761/article/details/7840252*/
/*
ie：旋转90,180,270=》
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);（参数可有：0，1，2，3；其中3表示：旋转270度）
------------------------
ie:旋转任意角度=》
filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand')
-----------------------
注意ie下对象旋转后，还要对它的位置进行调整=》
degree:表示旋转的角度，加去或加上90的倍数，使最终的值在0-90之间；
L：表示图形的宽度；（这里旋转的对象为正方形，当是别的图形时，方法需要调整）
t=exp(2)*L*cos(degree)-L;
把对象的top，left值设置为t值；
*/

.active7{
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
transform:rotate(30deg);
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.866,M12=-0.5,M21=0.5,M22=0.866,SizingMethod='auto expand');
*top:-52px; /*ie6,ie7*/
*left:-52px;
top:-48px\9; /*ie8*/
left:-48px\9;
}
.active6{
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
transform:rotate(70deg);
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.342,M12=-0.940,M21=0.940,M22=0.342,SizingMethod='auto expand');
*top:-52px;
*left:-52px;
top:-37px\9;
left:-37px\9;
}
.active5{
-moz-transform:rotate(110deg);
-webkit-transform:rotate(110deg);
transform:rotate(110deg);
filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.342,M12=-0.940,M21=0.940,M22=-0.342,SizingMethod='auto expand');
*top:-52px;
*left:-52px;
top:-37px\9;
left:-37px\9;
}
.active4{
-moz-transform:rotate(150deg);
-webkit-transform:rotate(150deg);
transform:rotate(150deg);
filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.866,M12=-0.5,M21=0.5,M22=-0.866,SizingMethod='auto expand');
*top:-52px;
*left:-52px;
top:-48px\9;
left:-48px\9;
}
.active3{
-moz-transform:rotate(190deg);
-webkit-transform:rotate(190deg);
transform:rotate(190deg);
filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.985,M12=0.174,M21=-0.174,M22=-0.985,SizingMethod='auto expand');
*top:-52px;
*left:-52px;
top:-21px\9;
left:-21px\9;
}
.active2{
-moz-transform:rotate(230deg);
-webkit-transform:rotate(230deg);
transform:rotate(230deg);
filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.643,M12=0.766,M21=-0.766,M22=-0.643,SizingMethod='auto expand');
*top:-52px;
*left:-52px;
top:-54px\9;
left:-54px\9;
}
div.active1{
background-image:url(circle3.png);
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
transform:rotate(270deg);
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0,M12=1,M21=-1,M22=0,SizingMethod='auto expand');
}
.active0{
-moz-transform:rotate(310deg);
-webkit-transform:rotate(310deg);
transform:rotate(310deg);
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.643,M12=0.766,M21=-0.766,M22=0.643,SizingMethod='auto expand');
*top:-52px;
*left:-52px;
top:-54px\9;
left:-54px\9;
}
.active8{
-moz-transform:rotate(350deg);
-webkit-transform:rotate(350deg);
transform:rotate(350deg);
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.985,M12=0.174,M21=-0.174,M22=0.985,SizingMethod='auto expand');
*top:-52px;
*left:-52px;
top:-21px\9;
left:-21px\9;
}
#inner{
? position:absolute;
? width:80px;
? height:80px;
? display:block;
? left:90px;
? top:90px;
? color:#fff;
? font-weight:bold;
? text-align:center;
? padding-top:10px;
}
#inner .span1{
? font-size:16px;
}
#inner .span2{
? font-size:30px;
? display:block;
? padding-top:10px;
}
/*?
*top:-52px;
*left:-52px;
top:-48px\9;
left:-48px\9;
**/


</style>
</head>

<body>
<div id="div1">
? <div class="div3 active1">
? </div>
? <div class="div2">
??? <!--利用map，area对图形的中不规则图形进行分割，可用dreamweaver进行调整-->
??? <img src="circle4.png" usemap="#map1" style="border:none;" />
??? <map name="map1" id="map1">
????? <area shape="poly" coords="85,74,57,116,3,106,17,64,44,29" alt="1" href="#"/>
????? <area shape="poly" coords="58,120,67,167,16,195,0,151,2,110" alt="1" href="#"/>
????? <area shape="poly" coords="104,203,85,251,44,230,16,199,67,169" alt="1" href="#"/>
????? <area shape="poly" coords="175,253,128,260,90,252,107,204,158,204" alt="1" href="#"/>
????? <area shape="poly" coords="245,197,216,230,180,252,160,202,197,169" alt="1" href="#"/>
????? <area shape="poly" coords="260,109,260,160,247,195,198,166,207,119" alt="1" href="#"/>
????? <area shape="poly" coords="216,29,247,69,261,105,206,116,179,74" alt="1" href="#"/>
????? <area shape="poly" coords="134,1,176,6,215,29,177,73,130,57" alt="1" href="#"/>
????? <area shape="poly" coords="46,27,83,7,133,1,131,58,83,71" alt="1" href="#"/>
??? </map>
? </div>
? <div id="inner">
???? <span class="span1">零食特产</span>
? <span class="span2">5%</span>
? </div>
</div>
<div id="t"></div>
<script>
/*
*? 仿一淘-全网今日热门类目价格变化幅度；
*? ie8,ff中可用，opera中不可用；
*? ********made by keimon*********
*? **********2013-01-15***********
*/
$(function(){
//显示在图片中间的文字；
var data = [
{name:'家具日用',percent:'15.0%'},
{name:'零食特产',percent:'-9.9%'},
{name:'奶粉',percent:'7.7%'},
{name:'生活电器',percent:'8.8%'},
{name:'数码配件',percent:'2.2%'},
{name:'美容护肤',percent:'3.3%'},
{name:'服饰配件',percent:'4.4%'},
{name:'箱包皮具',percent:'5.5%'},
{name:'家装主材',percent:'6.6%'}
]
?? var len = $('area').length;
?? for(var i=0; i<len; i++){
????? $('area').mouseenter(function(){
????? var that = this;
????? var index = $('area').index(that);
?? for(var i=0; i<len; i++){
????? var a = 'active'+i;
???$('.div3').removeClass(a);
?? }
?? var active = 'active'+index
?? $('.div3').addClass(active);
?? $('#inner .span1').html(data[index].name);
?? $('#inner .span2').html(data[index].percent);
?? })
?? }
})
</script>
</body>

</html>

?

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.