您的位置: 首页  >  IT文章  >  两种图片360渡旋转方法的比较

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

分类: IT文章 • 2023-01-12 00:26:35
两种图片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.****.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>

 

相关推荐