码迷,mamicode.com
首页 > Web开发 > 详细

js实现旋转的图片

时间:2015-05-08 01:49:38      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:jquery   js   

gif可以实现旋转的图片,但是怎么使用js实现的。自己想了一下,打算实现一下,整体思路也很简单,每隔一段时间,旋转一下图片,看起来就像在一直旋转一样。实例地址

旋转rotate.js的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * Created by YD on 5/7/15.
 * Base on Jquery
 */
var ele ;

//自定义函数
$.fn.extend({
    rotate: function () {
        ele = this ;
        setInterval(‘singleRotate()‘,20);
    }
});

//初始角度
var degree = 0;

//单次旋转
function singleRotate() {
    //一次增加50度
    degree = degree + 50 * Math.PI / 180;
    ele.css("transform","rotate("+degree+"deg)");
}

代码中只需引用一下js就行了,我将其封装后放在了服务器上,大家可以直接引用

1
<script src="http://libs.codeboy.me/js/rotate/1.0/rotate.js"></script>

引用前记得引用jquery,最后在自己的代码中调用rotate方法即可。

1
 $(element).rotate();


更多文章请访问小胖轩.

js实现旋转的图片

标签:jquery   js   

原文地址:http://blog.csdn.net/dliyuedong/article/details/45569271

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!