- 浏览: 13637277 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
1. jquery rotate插件 (不支持连续旋转,有动画效果)
参看:http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html
<img id="image3" src="http://i53.tinypic.com/181we8.jpg"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jQueryRotate.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#image3').rotate({maxAngle:25,minAngle:-55, bind: [ {"mouseover":function(){$(this).rotateAnimation(85);}}, {"mouseout":function(){$(this).rotateAnimation(-35);}} ] }); $('#image2').rotateAnimation({angle:5}); $('#image').rotate(-25); }); </script>
Usage:
jQuery(imgElement).rotate(angleValue)
jQuery(imgElement).rotate(parameters)
jQuery(imgElement).rotateAnimation(parameters)
jQuery(imgElement).rotateAnimation(parameters)
Returns:
jQueryRotateElement - !!! NOTICE !!! function return rotateElement instance to help connect events with actually created 'rotation' element.
Parameters:
({angle:angleValue,
[preservePosition:preservePositionBoolean],
[animateAngle:animateAngleValue],
[maxAngle:maxAngleValue],
[minAngle:minAngleValue],
[callback:callbackFunction],
[animatedGif:animatedGifBoolean],
[bind:[{event: function},{event:function} ] })
jQuery(imgElement).rotateAnimation
Where:
- angleValue - clockwise rotation given in degrees,
- [preservePositionBoolean] (boolean) - optional parameter, preserves an image position instead of increasing size for bounding box
- [animateAngleValue] - optional parameter, animate rotating into this value,
- [maxAngleValue] - optional parameter, maximum angle possible for animation,
- [minAngleValue] - optional parameter, minimum angle possible for animation,
- [callbackFunction] - optional function to run after animation complete,
- [animatedGifBoolean](boolean) - optional set to display animated gif in firefox/chrome/safari !!! this might slow down browser because it need to render image again and again to display animation,
- [bind: [ {event: function}...] -optional parameter, list of events binded to newly created rotateable object
2. jquery rotate插件 (支持连续旋转, 无 动画效果)
参看: http://code.google.com/p/jquery-rotate/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery 任意角度旋转</title> <style type="text/css"> body {padding: 0; margin: 0;} body,html{height: 100%;} #outer {width: 100%; height: 100%; overflow: hidden; position: relative; } #middle { *position: absolute; top: 50%; *left: 50%; text-align:center; } /* for explorer only*/ #middle[id] { display: table-cell; vertical-align: middle; position: static; *position: absolute; } #inner {position: relative; top: -50%; *left: -50%; margin: 0 auto; } /* for explorer only */ #outer[id] {display: table; position: static;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="http://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.js"></script> </head> <body> <div id="outer"> <div id="middle"> <div id="inner" style="border:red 2px solid;width:300px;height:300px;padding:3px;"><img id="theimage" border="0" src="118812060.jpg" /></div> </div> </div> <div style="position: relative;height:40px;margin-top:-40px;"> <input type="button" value="<-Rotate" name="RotateL" id="RotateL" onclick="$('#theimage').rotateRight(30);"> <input type="button" value="Rotate->" name="RotateR" id="RotateR" onclick="$('#theimage').rotateRight(-30);"> </div> </body> </html>
3. JavaScript 版 (支持连续旋转,无动画效果)
<script> /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Benoit Asselin | http://www.ab-d.fr */ function rotate(p_deg) { if(document.getElementById('canvas')) { /* Ok!: Firefox 2, Safari 3, Opera 9.5b2 No: Opera 9.27 */ var image = document.getElementById('image'); var canvas = document.getElementById('canvas'); var canvasContext = canvas.getContext('2d'); switch(p_deg) { default : case 0 : canvas.setAttribute('width', image.width); canvas.setAttribute('height', image.height); canvasContext.rotate(p_deg * Math.PI / 180); canvasContext.drawImage(image, 0, 0); break; case 90 : canvas.setAttribute('width', image.height); canvas.setAttribute('height', image.width); canvasContext.rotate(p_deg * Math.PI / 180); canvasContext.drawImage(image, 0, -image.height); break; case 180 : canvas.setAttribute('width', image.width); canvas.setAttribute('height', image.height); canvasContext.rotate(p_deg * Math.PI / 180); canvasContext.drawImage(image, -image.width, -image.height); break; case 270 : case -90 : canvas.setAttribute('width', image.height); canvas.setAttribute('height', image.width); canvasContext.rotate(p_deg * Math.PI / 180); canvasContext.drawImage(image, -image.width, 0); break; }; } else { /* Ok!: MSIE 6 et 7 */ var image = document.getElementById('image'); switch(p_deg) { default : case 0 : image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; break; case 90 : image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; break; case 180 : image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; break; case 270 : case -90 : image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; break; }; }; }; // Multiple onload function created by: Simon Willison // http://simonwillison.net/2004/May/26/addLoadEvent/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { var image = document.getElementById('image'); var canvas = document.getElementById('canvas'); if(canvas.getContext) { image.style.visibility = 'hidden'; image.style.position = 'absolute'; } else { canvas.parentNode.removeChild(canvas); }; rotate(0); }); </script> <p> rotate: <input type="button" value="0" onclick="rotate(0);"> <input type="button" value="90" onclick="rotate(90);"> <input type="button" value="180" onclick="rotate(180);"> <input type="button" value="-90" onclick="rotate(-90);"> </p> <p> <img id="image" src="118812060.jpg" alt="t90" /> <canvas id="canvas"></canvas> </p>
两者均支持IE6+, Firefox 3+, Chrome
- jQueryRotate.zip (28.6 KB)
- 下载次数: 182
- jquery.rotate.rar (817 Bytes)
- 下载次数: 121
发表评论
-
使用jQuery和Pure.CSS创建一个可编辑的表格
2016-08-26 02:24 1177使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2261当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1174参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 1012在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 941从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1549先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3296每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1201原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4457出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1339一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1557一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 822域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2276代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 717代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1591插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 504上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1181javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3573寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1102AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 691AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
项目请参见:https://handsome-man.blog.csdn.net/article/details/116427984 图像平移是指将图像中所有的点都沿着水平或垂直方向移动一定的距离。 项目可直接运行~
本程序是源于LabVIEW自带的2D飞机图片旋转VI,经过修改可实现自主选择旋转图片,图片格式为JPG、BMP、PNG三种,需注意的是图片必须是500*500的,否则图片显示会有问题,也可自行修改。
rotate做单帧图片旋转类似刷新图标
VC6环境下的高质量图片旋转例程,包含所有工程文件
使用hammer.js 可以手势控制同时进行旋转 拖拽 ...重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....双点触控就立马旋转造成抖动视觉效果的bug)
通过exif获取图片旋转值,使用rotate-photo.js旋转图片,使图片正向显示
跨浏览器控制图片旋转jquery插件jquery.rotate.js.zip 跨浏览器控制图片旋转jquery插件jquery.rotate.js.zip 跨浏览器控制图片旋转jquery插件jquery.rotate.js.zip
jquery rotate图片旋转插件制作转盘360度旋转抽奖代码.zip
前端图片旋转。
canvas图片旋转,每次顺时针或逆时针旋转90度后,宽度自适应容器宽度,等比缩放
c#图片旋转代码.可以指定角度来旋转c#图片旋转代码.可以指定角度来旋转c#图片旋转代码.可以指定角度来旋转
实现了图片的旋转,在opencv库的支持下实现的, 不过没有调用库中的方法,实现了他的原理
dopelessRotate是一款基于jQuery的图片旋转插件,这款图片旋转插件功能非常强大,它不仅可以在加载的时候显示进度条,而且点击右侧的放大镜按钮可以查看原始大图,并且可以滑动鼠标来漫游大图的每一个细节。...
Android 安卓生成4种图片动画效果,可用于画廊、画册、图库壁纸、相框应用中,这几种渐变分别是图片渐变(淡入淡出)Alpha透明度变化、图片拉伸由大到小Scale、图片移位Translate、图片旋转Rotate如演示截图所示,...
利用Canvas 的save,translate,rotate 相关方法,可以比较快速的实现图片旋转,且中心点不偏移。避免了使用Bitmap中setRotate中旋转覆盖且出现黑边的问题。可以直接下载使用自定义控件就可以了。
图片旋转效果的研究最近在项目中需要做图片的旋转功能,我研究了一下。下面来总结下图片旋转在各个浏览器的支持情况 一、图片旋转的方案 1)css3实现图片旋转功能:支持的浏览器有chrome,firefox;opera是不支持的...
c# winform Rotate 图像图形 旋转的源码 希望对大家有用处