演示1 直接旋转一个角度

$('#img1').rotate(45);

演示2 鼠标移动效果

$('#img2').rotate({
bind : {
mouseover : function(){
$(this).rotate({animateTo: 180});
}, mouseout : function(){
$(this).rotate({animateTo: 0});
}
}
}); 演示3 不停旋转 var angle = 0;
setInterval(function(){
angle +=3;
$('#img3').rotate(angle);
}, 50); var rotation = function (){
$('#img4').rotate({
angle: 0,
animateTo: 360,
callback: rotation
});
}
rotation(); var rotation2 = function(){
$('#img5').rotate({
angle: 0,
animateTo: 360,
callback: rotation2,
easing: function(x,t,b,c,d){
return c*(t/d)+b;
}
});
}
rotation2(); 演示4 点击旋转 $('#img6').rotate({
bind: {
click: function(){
$(this).rotate({
angle: 0,
animateTo: 180,
easing: $.easing.easeInOutExpo
});
}
}
}); var value2 = 0;
$('#img7').rotate({
bind: {
click: function(){
value2 +=90;
$(this).rotate({
animateTo: value2
});
}
}
});

  参考地址:http://www.jq22.com/jquery-info308

jQuery旋转插件jquery.rotate.js 让图片旋转的更多相关文章

  1. rotate.js实现图片旋转 (chrome,IE,firefox都可以实现)

    找了好多资料,要么是IE可以用,但是谷歌不行,,还有就是两个都可以用的,图片大小显示不全.终于找到一个好一点的js,先贴一下代码. 1.rotate.js jQuery.fn.rotate = fun ...

  2. jQuery滚动条插件 – jquery.slimscroll.js

    jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...

  3. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒   1.前端   首先html的head中引入相关css与js <lin ...

  4. js实现图片旋转、模板文件查看图片大图之记录篇[二]

    一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图. 主要使用的是jQuery的delegate()方法实现图片旋转,该方法主要的功能就是给某个组件绑定一个或一组事件 ...

  5. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  6. jQuery遮罩插件 jquery.blockUI.js

    Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DO ...

  7. 【js】js 让图片旋转

     转http://www.cnblogs.com/ustcyc/p/3760116.html 核心: canvas.style.filter = "progid:DXImageTransfo ...

  8. JQuery多媒体插件jQuery Media Plugin使用详解

    malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...

  9. js实现图片旋转

    1.以下代码适用ie9版本 js代码如下: function rotate(o,p){ var img = document.getElementById(o); if(!img || !p) ret ...

随机推荐

  1. wc 命令

    Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1.命令格式: wc [选项]文件... 2.命令功能: 统计指定文件中的字节数. ...

  2. linux应用网址

    APUE学习:(十三) [终篇] 一起学 Unix 环境高级编程 (APUE) 之 网络 IPC:套接字 linux应用学习笔记(已列目录供跳转):http://www.cnblogs.com/ggj ...

  3. xml初学简单介绍

    什么是XML? 1.全称Extensible Markup Language,可扩展标记语言,W3C组织公布. 2.XML用来保存有一定结构关系的数据. 3.标签的嵌套,实质是一串字符串. 4.跨平台 ...

  4. 好文章收藏--五分钟理解一致性哈希算法(consistent hashing)

    一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网中的热点(Hot spot)问题,初衷和CARP十分类似.一致性哈希修正了CARP使用的简 单哈 ...

  5. .net 字符串驻留

    .net中的string表达的是常量字符串. JIT编译器编译时判断遇到的常量字符串是否在内部散列表中,如果不在,添加进去.当第一次执行到含字符串的方法时,CLR会检查该字符串是否在内部的一个散列表中 ...

  6. 动态对象创建(二)重载new和delete

    动态对象创建(二)重载new和delete 前言 上文我简单介绍了一下动态对象创建的方法,这一篇文章的内容主要是对重载new和delete做一些讲解,也希望能够得到博友们的指点,在这里谢过大家. 通常 ...

  7. SQL Server研究之统计信息—发现过期统计信息并处理具体解释

     前言: 统计信息是关于谓词中的数据分布的主要信息源,假设不知道详细的数据分布,优化器不能获得预估的数据集.从而不能统计须要返回的数据. 在创建列的统计信息后,在DML操作如insert.upda ...

  8. Unity Texture2D的sRGB(Color Texture)的作用

    在gramma空间下,勾选与否无关. 在liner空间下,勾选shader会自动将读到的像素作gramma矫正,即x的0.45次方 不勾选,shader读到的就是原始的颜色值 然后unity如果选了g ...

  9. thinkPHP5.0的学习研究【架构】

    2017年6月19日18:51:53 架构:1.ThinkPHP5.0应用基于MVC(模型-视图-控制器)的方式来组织.2.MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC ...

  10. Zabbix 监控tomcat web

    个人博客:https://blog.sharedata.info/ 在zabbix监控web,web容器是tomcat 默认的端口是8080导致web监控失败!不能找到主机因此在修改tomcat 端口 ...