jquery旋转插件

时间:2021-06-20 09:20:54
【文件属性】:

文件名称:jquery旋转插件

文件大小:5KB

文件格式:ZIP

更新时间:2021-06-20 09:20:54

旋转插件

需要先引用基础jquery类库 然后在引用这个 最后 //演示1 //旋转45angle $(document.body).click(function () { //方式1 $('.divOne').rotate(45); //方式2 $('.divOne').rotate({ angle: 45 }); }); ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //演示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}); }); ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 //演示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(); ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //演示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 }); });


【文件预览】:
jquery.rotate-0.3.0
----.gitignore(4B)
----jquery.rotate.js(1KB)
----LICENSE(7KB)
----README.md(377B)
----rotate.jquery.json(728B)

网友评论