jQuery旋转插件jqueryrotate用法详解


Posted in Javascript onOctober 13, 2016

本文实例讲述了jQuery旋转插件jqueryrotate用法。分享给大家供大家参考,具体如下:

CSS3 提供了多种变形效果,比如矩阵变形、位移、缩放、旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动。然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(filter),但不全面,而且效果和性能都不好。

今天介绍一款 jQuery 插件——jqueryrotate,它可以实现旋转效果。jqueryrotate 支持所有主流浏览器,包括 IE6。如果你想在低版本的 IE 中实现旋转效果,那么 jqueryrotate 是一个很好的选择。

兼容性

jqueryrotate 支持所有主流浏览器,包括 IE6。jqueryrotate 在高级浏览器中使用 CSS3 transform 属性实现,在低版本 IE 中使用 VML 实现。当然,你可以使用 IE 条件注释,低版本 IE 使用 jqueryrotate,高级浏览器则直接使用 CSS3。

使用方法

//演示1
//旋转45angle
$(document.body).click(function () {
 //方式1
 $('.divOne').rotate(45);
 //方式2
 $('.divOne').rotate({ angle: 45 });
});
//演示2
//鼠标移动效果
//方式1
$('.divOne').rotate({
 bind: {
 mouseover: function () {
  $(this).rotate({ animateTo: 180 });
 },
 mouseout: function () {
  $(this).rotate({ animateTo: 0 });
 }
 }
});
//方式2
$('.divOne').mouseover(function () {
 $(this).rotate({ animateTo: 180 });
}).mouseout(function () {
 $(this).rotate({animateTo:0});
});
//演示3 不停旋转
//方式1
var angle = 0;
setInterval(function () {
 angle += 3;
 $('.divOne').rotate(angle);
}, 50);
//方式2
var rotation = function () {
 $('.divOne').rotate({
 angle: 0,
 animateTo: 360,
 callback:rotation
 })
}
rotation();
//方式3
var rotation = function () {
 $('.divOne').rotate({
 angle: 0,
 animateTo: 360,
 callback: rotation,
 easing: function (x, t, b, c, d) {
  return c * (t / d) + b;
 }
 })
}
rotation();
//演示4 点击旋转
//方式1
$('.divOne').click(function () {
 $(this).rotate({
 angle: 0,
 animateTo: 180,
 easing: $.easing.easeInOutExpo
 });
});
var val = 0;
$('.divOne').click(function () {
 val += 90;
 $(this).rotate({
 animateTo: val
 });
});

参数

参数 类型 说明 默认值
angle 数字 旋转一个角度 0
animateTo 数字 从当前的角度旋转到多少度 0
step 函数 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
easing 函数 自定义旋转速度、旋转效果,需要使用 jQuery.easing.js
duration 整数 旋转持续时间,以毫秒为单位  
callback 函数 旋转完成后的回调函数
getRotateAngle 函数 返回旋转对象当前的角度
stopRotate 函数 停止旋转

 

演示虽然使用的是图片,但 jqueryrotate 并不只是能运用在图片上,其他元素如 div 等也可以使用。同时,你可以发挥想象,制作出更多关于旋转的特效。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
js实现模糊匹配功能
Feb 15 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
JS取模、取商及取整运算方法示例
Oct 13 #Javascript
JavaScript中常用的验证reg
Oct 13 #Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 #Javascript
浅谈jquery上下滑动的注意事项
Oct 13 #Javascript
js中class的点击事件没有效果的解决方法
Oct 13 #Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 #Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 #Javascript
You might like
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
JS原型对象通俗"唱法"
2012/12/27 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
Python查找相似单词的方法
2015/03/05 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
python使用PyQt5的简单方法
2019/02/27 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
基于python检查矩阵计算结果
2020/05/21 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
护理自荐信范文
2013/10/05 职场文书
公务员总结性个人自我评价
2013/12/05 职场文书
广告宣传策划方案
2014/05/21 职场文书
设备技术员岗位职责
2015/04/11 职场文书
在校证明模板
2015/06/17 职场文书
《大禹治水》教学反思
2016/02/22 职场文书