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

最新推荐文章于 2020-03-26 10:37:42 发布
最新推荐文章于 2020-03-26 10:37:42 发布
阅读量499 收藏
点赞数
分类专栏： jquery 文章标签： jquery ViewUI



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

 

iteye_6992
关注
专栏目录
360度自动旋转图片
08-27
这是一个基于soui的自动旋转图片的控件，当时是有一个实现旋转的loading状态的进度时实现的！很方便，很实用！
flash+xml360度图片旋转展示代码
01-23
6. 更新显示：实时更新图片的位置和角度，达到360度旋转的视觉效果。 在"201104115"这个压缩包文件中，很可能包含了完成上述步骤所需的源代码、XML数据文件和图片资源。解压后，开发者可以研究代码结构，理解其工作...
比较两种对图像进行指定角度旋转的算法（批量操作）
weixin_44713552的博客
03-14 1383
比较两种视频按帧数截取图片的算法（python） 第一种用了python的3个库函数 1.open cv 2.argparse 3.os 其效果如下： 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代...
计算两幅图之间的旋转角
Ring__Rain的博客
02-14 1491
a、从图像中心向四周抛出射线，以0.1°为一格，共360°，3600个射线； b、计算每根射线所打到图像上的像素累计和，得到一个曲线，可称为一个方向向量。 c、模板图和测试图的两个曲线之间的距离乘以0.1°，即为其两者之间的旋转角。 如：原图： 旋转了10° 两个曲线 ...
360度旋转图片
kuangzihui1989的博客
08-06 541
CABasicAnimation* rotationAnimation;     rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];     rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0
图片旋转不同角度；改变图片尺寸；两个向量之间的相似度；散点图
田田的博客
03-26 821
''' 图片旋转不同角度 ''' import cv2 import imutils image = cv2.imread('D:\python course/tuxiangshibie\data/0.jpg') rotated = imutils.rotate(image, 180) # 图片旋转180度 cv2.imwrite('D:\python course/tuxiangshi...
360度旋转图片插件UIMIX.fullview特效代码
03-20
【360度旋转图片插件UIMIX.fullview特效代码】是一款专为网页设计而开发的工具，它提供了一种高效且引人入胜的方式来展示产品图片，特别是在电子商务和商品展示领域。这款插件允许用户以360度全方位视角查看图片，...
js实现按钮控制图片360度翻转特效的方法
10-24
在这篇文章中，作者主要介绍了如何使用JavaScript（js）和HTML5的canvas元素来实现通过按钮控制图片进行360度旋转翻转的特效。这个特效的核心思路是通过监听按钮的点击事件，并在事件触发时，对指定图片应用一系列的...
android360度3D旋转动画
12-14
在Android开发中，360度3D旋转动画是一种常用且引人注目的视觉效果，可以为用户界面增添动态感和交互性。本教程将深入探讨如何实现这种效果，通过提供的"RotateDemo"代码示例，你可以直接运行并学习。 首先，让我们...
flutter_imageview_360:Flutter软件包，可通过旋转和手势自定义提供360度的图像视图
04-14
imageview360 Flutter程序包可通过旋转和手势自定义提供360度的图像视图。 支持的Dart版本 Dart SDK版本> = 2.1.0 演示Gif 安装 添加包裹 dependencies : imageview360 : ^1.2.0 如何使用 将包导入到您的dart文件中 import 'package:imageview360/imageview360.dart' ; 基本用法： ImageView360 ( key : UniqueKey (), imageList : imageList, ), 注意：要使ImageView360在热重载时显示即时更改，您需要提供UniqueKey()以便小部件每次都能重建。 可定制的用法： ImageView360 ( key : UniqueKey (),
一图片持续360度旋转
已疯的小胖子
05-23 862
CABasicAnimation* rotationAnimation;         rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];         rotationAnimation.toValue = [NSNumber numberWithFloat
js实现360度图片旋转
u011277123的博客
01-22 2965
达人科技 2017-01-21 17:28 ▓▓▓▓▓▓ 大致介绍 这次是一个简单的效果，就是思路的问题 效果： ▓▓▓▓▓▓ 思路 旋转的效果就是根据鼠标的的移动距离来显示不同的图片，形成视觉差，仿佛就是在正真的旋转 由于效果是根据鼠标的移动距离来操作的，即移动的像素值。如果按照默认的情况，移动鼠标的时候图片就旋转的太快了，所以我们要给鼠标移动的距离处以15，降低图片的旋转速
Unity做360度的全景照片
weixin_34289744的博客
09-23 1122
这里推荐两种方法，第一种是用鼠标滑动，第二种是用手机的陀螺仪进行全景查看 第一种： 1、新建一Sphere,然后为其赋予材质，注意材质的Shader类型为：Mobile/particles/Alpha Blended,然后将做好的全景图贴上去 2、在摄像机上附加以下脚本：代码来源参考自 1 using UnityEngine; 2 using System.Collecti...
前端解决图片在浏览器中旋转问题
zihao6的博客
10-16 5282
在开始之前需要了解为什么在浏览器中图片会自动旋转，在一些相机设备中因手持方向的原因导致图片会有一个旋转角度，在浏览器中旋转角度被忽略了，导致图片看过去是旋转的 图片旋转如下 如图 1 正常 6 旋转90° 8 旋转-90° 3 旋转180° 既然知道了图片需要旋转的角度，那么只需要通过canvas旋转并绘制图片，然后将图片输出就行，这里需要借助exif-js获取图片的源信息，只需要判断 Orie...
实现图片360度 旋转
weixin_30501857的博客
12-28 2086
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>img_3D</title></head><style type="text/css">@keyframes an1{0%{transform: rotateY(0deg)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值