`
keimon
  • 浏览: 74777 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

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

jquery 
阅读更多



 两种方式实现图片滚动，其中运用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>

 

  • 大小: 9.4 KB
0
顶
0
踩
分享到：
| 仿天猫首页-滚动广告和分类列表
评论
1 楼 liu621java 2014-07-10  
t=exp(2)*L*cos(degree)-L; 能详细的解释一下吗 没看明白
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    android360度3D旋转动画

    在Android开发中，360度3D旋转动画是一种常用且引人注目的视觉效果，可以为用户界面增添动态感和交互性。本教程将深入探讨如何实现这种效果，通过提供的"RotateDemo"代码示例，你可以直接运行并学习。 首先，让我们...

    360度旋转js代码

    在JavaScript编程中，360度旋转是一种常见的视觉效果，常用于网页上的图像展示或交互式元素。这种技术主要依赖于CSS3的transform属性和JavaScript的动态修改样式能力。下面我们将详细探讨如何实现360度旋转的效果。 ...

    jquery实现360度旋转

    首先，要实现360度旋转，我们需要准备一系列连续拍摄的产品图片，这些图片通常是围绕产品中心360度拍摄的。每张图片代表一个微小的角度，当这些图片按顺序快速显示时，会给用户带来360度旋转的视觉效果。 接下来，...

    VB版图片360度旋转无锯齿图带核心代码

    标题中的“VB版图片360度旋转无锯齿图带核心代码”指的是一个使用Visual Basic（VB）编写的程序，能够实现图像360度旋转，并且在旋转过程中保持图像边缘平滑，避免出现锯齿现象。这个程序的核心在于其算法设计，它...

    Silverlight 4实现的360度旋转3D图片浏览器

    《使用Silverlight 4构建360度旋转3D图片浏览器》 Silverlight 4作为一个强大的RIA（Rich Internet Application）开发平台，提供了丰富的图形和动画处理能力，使得开发者能够创建出极具视觉冲击力的交互式应用。在...

    360度自动旋转图片

    在C++中，图片的360度旋转通常涉及到矩阵变换和图形绘制的知识。开发者可能使用了OpenGL或Direct2D这样的图形库来实现，通过矩阵旋转操作改变图片的坐标，模拟出旋转的效果。同时，为了实现加载进度，可能还需要一个...

    Android开发图片旋转的两种方式

    本教程将详细讲解两种实现Android图片旋转的方法：动画（Animation）和Matrix变换。 一、动画（Animation）方式 1. 创建旋转动画资源文件：在res/anim目录下创建rotate.xml，内容如下： ```xml android:...

    360度旋转tab标签切换内容

    "360度旋转tab标签切换内容"是一种创新的交互设计技术，旨在提升用户在使用应用程序或网站时的视觉享受和操作体验。这个设计效果源于Windows 8的"梅超风"设计风格，它引入了一种独特的翻牌效果，通过代码而非图片...

    文字360度旋转Flash动画特效.rar

    本资源“文字360度旋转Flash动画特效.rar”提供了一个独特的Flash动画效果，其中的文字和中心标志能够实现360度的连续旋转，为网页增添动态视觉效果。 首先，我们要理解Flash源码的概念。Flash源码是使用...

    css特效,旋转360度,放大3倍

    本主题将详细讲解如何使用CSS实现一个元素的360度旋转、3倍放大以及背景颜色变为绿色的特效。 首先，我们关注的是元素的360度旋转。CSS3引入了`transform`属性，它允许我们对元素进行各种变换，包括旋转。要使元素...

    360度展示代码，360度看车代码，360度看房代码,360度全景代码

    标签“360度全景”是指一种能够全方位展示场景的技术，通过拼接多张照片或视频，创造出一种可以自由旋转和缩放的视觉效果。“360度看车”和“360度看房”是这项技术的具体应用，让用户能够在购买或租赁之前，从各个...

    180度舵机和360度舵机控制

    180度舵机和360度舵机是其中两种常见的类型，它们各有特点，并且可以通过微控制器如MSP430F149或169进行控制。 180度舵机，正如其名，能实现0到180度的角度旋转。这种舵机通常有一个固定的死区，即在正向和反向极限...

    商品360度展示

    为了实现360度旋转，首先需要一组连续拍摄的商品图片，这些图片通常是围绕商品中心轴拍摄的，每个角度一张。然后，JavaScript代码会将这些图片按照一定的顺序和速度进行无缝拼接，形成一个连续的旋转动画。在用户...

    非常快的360度旋转图片源码[RotateDIBpic.rar]-精品源代码

    该压缩包文件“RotateDIBpic.rar”包含的是一个用于快速360度旋转图片的源代码项目。这个项目可能是一个实用程序，旨在帮助开发者高效地处理图像旋转操作，尤其适用于需要频繁或大量进行此类操作的场景。让我们深入...

    产品flash360度展示源码,js 360度展示，太平洋360度展示

    Flash是一种早期的富媒体开发平台，它允许开发者创建动态、交互性的内容，包括360度旋转展示。而JavaScript是一种更现代、更通用的编程语言，适用于网页上的各种交互功能，包括360度产品展示。随着HTML5的普及，...

    VB通过调用VC生成的DLL实现图片360旋转

    本话题主要探讨如何使用VB调用VC生成的动态链接库（DLL）来实现图片360度旋转的功能。 DLL是一种可执行文件格式，它包含可被其他程序调用的函数和资源。通过创建DLL，开发者可以将代码模块化，提高代码重用性，减少...

    css实现图片旋转效果

    现在我们已经掌握了单张图片旋转的技巧，让我们来实现两张图片不同频率的旋转。假设我们有两张图片`image1`和`image2`，并且希望`image1`每秒旋转3圈，`image2`每秒旋转2圈。我们可以使用CSS的`animation`属性来实现...

    flash+xml360度图片旋转展示代码

    6. 更新显示：实时更新图片的位置和角度，达到360度旋转的视觉效果。 在"201104115"这个压缩包文件中，很可能包含了完成上述步骤所需的源代码、XML数据文件和图片资源。解压后，开发者可以研究代码结构，理解其工作...

    javascript+css图片轮换/旋转/相册特效

    无论是简单的图片轮换，还是复杂的360度旋转，或者是动态的跑马灯效果，都体现了前端开发中JavaScript和CSS的强大力量。通过学习和实践这些代码，开发者可以提升自己的技能，为网站增加更多的互动性和趣味性。

    flex 图片自动旋转移动放大

    这将使图片每两秒（`duration="2000"`表示2000毫秒）自动旋转360度，且会反向旋转回原点，形成连续旋转的效果。 对于图片的移动，我们可以使用类似的`Animate`对象，但这次改变`x`和`y`坐标： ```mxml ``` 这...

Magicbox
Global site tag (gtag.js) - Google Analytics