演示1 直接旋转一个角度
1 | $( '#img1' ).rotate(45); |
演示2 鼠标移动效果
1 2 3 4 5 6 7 8 9 | $( '#img2' ).rotate({ bind : { mouseover : function (){ $( this ).rotate({animateTo: 180}); }, mouseout : function (){ $( this ).rotate({animateTo: 0}); } } }); |
演示3 不停旋转
1 2 3 4 5 | var angle = 0; setInterval( function (){ angle +=3; $( '#img3' ).rotate(angle); }, 50); |
1 2 3 4 5 6 7 8 | var rotation = function (){ $( '#img4' ).rotate({ angle: 0, animateTo: 360, callback: rotation }); } rotation(); |
1 2 3 4 5 6 7 8 9 10 11 | 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 点击旋转
1 2 3 4 5 6 7 8 9 10 11 | $( '#img6' ).rotate({ bind: { click: function (){ $( this ).rotate({ angle: 0, animateTo: 180, easing: $.easing.easeInOutExpo }); } } }); |
1 2 3 4 5 6 7 8 9 10 11 | var value2 = 0; $( '#img7' ).rotate({ bind: { click: function (){ value2 +=90; $( this ).rotate({ animateTo: value2 }); } } }); |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com