演示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. php使用imagick模块实现图片缩放、裁剪、压缩示例

    PHP 使用Imagick模块 缩放,裁剪,压缩图片 包括gif图片 缩放 裁剪 复制代码代码如下: /**  * 图片裁剪  * 裁剪规则:  *   1. 高度为空或为零   按宽度缩放 高度自适 ...

  2. 使用虚拟环境 virtualenv

    1.安装 $ sudo apt-get install python-virtualenv 2.重命名,一般虚拟环境会被命名为venv $ virtualenv   venv 3. 激活 $ sour ...

  3. Java 异常介绍

    Java标准库内建了一些通用的异常,这些类以 Throwable 为顶层父类.Throwable又派生出 Error 类和 Exception 类. 错误:Error类以及他的子类的实例,代表了JVM ...

  4. Centos date 设置自定义时间

    [1]手动修改 (1)设置日期 # date -s 20190315 (2)设置时间 # date -s 15:23:34 (3)设置日期和时间 # date -s "20190315 15 ...

  5. [root@localhost ~]#各项解释

    [root@localhost ~]# 解释: [登录用户@主机名 索引目录(~家目录,当前所在的目录)]#号代表超级用户,$普通用户

  6. 爬虫入门【6】Selenium用法简介

    Selenium 是什么? 一句话,自动化测试工具.它支持各种浏览器,包括 Chrome,Safari,Firefox 等主流界面式浏览器. 如果你在这些浏览器里面安装一个 Selenium 的插件, ...

  7. (比赛)B - Super Mobile Charger

    B - Super Mobile Charger Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & ...

  8. EasyDSS流媒体服务器软件对数据库Sqlite3和MySQL的同时支持说明

    EasyDSS流媒体音视频直播与点播服务器软件,是一套提供一站式的转码.点播.直播.检索.回放.录像下载服务的高性能RTMP/HLS/HTTP-FLV流媒体服务,极大地简化了流媒体相关业务的开发和集成 ...

  9. 九度OJ 1194:八进制 (进制转换)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3521 解决:2058 题目描述: 输入一个整数,将其转换成八进制数输出. 输入: 输入包括一个整数N(0<=N<=100000 ...

  10. 【python】-- 函数、无参/有参参数、全局变量/局部变量

    函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可以自己创建函 ...