分類  >  Web前端 >

兩種圖片360渡旋轉方法的比較

tags:    時間:2013-12-10 08:23:55
兩種圖片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>

 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網