当前位置：首页 > 资讯 > 技术文档

jQuery旋转插件jqueryrotate用法详解

时间：2021-10-06 02:14 编辑：来源：阅读：
扫一扫，手机访问

摘要：jQuery旋转插件jqueryrotate用法详解

本文实例讲述了jQuery旋转插件jqueryrotate用法。分享给大家供大家参考，具体如下： CSS3 提供了多种变形效果，比如矩阵变形、位移、缩放、旋转和倾斜等等，让页面更加生动活泼有趣，不再一动不动。然后 IE10 以下版本的浏览器不支持 CSS3 变形，虽然 IE 有私有属性滤镜（filter），但不全面，而且效果和性能都不好。今天介绍一款 jQuery 插件——jqueryrotate，它可以实现旋转效果。jqueryrotate 支持所有主流浏览器，包括 IE6。如果你想在低版本的 IE 中实现旋转效果，那么 jqueryrotate 是一个很好的选择。 [b]兼容性[/b] jqueryrotate 支持所有主流浏览器，包括 IE6。jqueryrotate 在高级浏览器中使用 CSS3 transform 属性实现，在低版本 IE 中使用 VML 实现。当然，你可以使用 IE 条件注释，低版本 IE 使用 jqueryrotate，高级浏览器则直接使用 CSS3。 [b]使用方法[/b]

//演示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
 });
});

[b]参数[/b]

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

演示虽然使用的是图片，但 jqueryrotate 并不只是能运用在图片上，其他元素如 div 等也可以使用。同时，你可以发挥想象，制作出更多关于旋转的特效。更多关于jQuery相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/877.htm]jQuery窗口操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/497.htm]jQuery拖拽特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/200.htm]jQuery常用插件及用法总结[/url]》、《[url=http://www.1sucai.cn/Special/93.htm]jquery中Ajax用法总结[/url]》、《[url=http://www.1sucai.cn/Special/539.htm]jQuery表格(table)操作技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/451.htm]jQuery扩展技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/430.htm]jQuery常见经典特效汇总[/url]》、《[url=http://www.1sucai.cn/Special/104.htm]jQuery动画与特效用法总结[/url]》及《[url=http://www.1sucai.cn/Special/75.htm]jquery选择器用法总结[/url]》希望本文所述对大家jQuery程序设计有所帮助。

全部评论(0)

上一篇：Mac 安装 nodejs方法（图文详细步骤）
下一篇：Android实战教程第八篇之短信备份

资讯排行榜
更多>>