js如何实现一个div左右旋转

JavaScript047

js如何实现一个div左右旋转,第1张

js控制div旋转的例子:

<DIV id=aDiv style="WIDTH: 70pxPOSITION: absoluteHEIGHT: 70px">

<IMG width=70 height=70 src="http://www.smallrain.net/jsimg/images/pic.gif" />//假如这个图

<DIV>

//使角度转起来

var angle = 0

function doRotate() {

//检查并确保角度值在0到360之间

if(angle>360) angle-=360

//使角度增加

angle+=15

//do rotation

rotate("aDiv",angle)

//定位旋转中心

var el = document.getElementByIdx_x_x("aDiv")//C#中要马上设位置.

el.style.top = 25 - (el.offsetHeight/2)//父元素的高度/2-旋转元素高度/2,还需注意旋转是同父元素的LOP,和left上关的,请上机测试

el.style.left = 25 - (el.offsetWidth/2)//父元素的宽度/2-旋转元素度/2

//循环

setTimeout("doRotate()",20)

}

rotate是jQuery旋转rotate插件,支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现。

rotate(angle)angle参数:[Number] – 默认为 0

根据给定的角度旋转图片例如:

$(“#img”).rotate(45)或 $(‘#img’).rotate({angle:45})

rotate(parameters)parameters参数:[Object] 包含旋转参数的对象。

支持的属性:

1.angle属性:[Number] – default 0 – 旋转的角度数,并且立即执行

例如:1$(“#img”).rotate({angle:45})

2.bind属性:[Object] 对象,包含绑定到一个旋转对象的事件。事件内部的$(this)指向旋转对象-这样可以在内部链式调用- $(this).rotate(…)。

例如 (click on arrow):

$(“#img”).rotate({bind:{

    click: function(){

            $(this).rotate({

                angle: 0,

                animateTo:180

            })

          }

       }

})

3.animateTo属性:[Number] – default 0 – 从当前角度值动画旋转到给定的角度值 (或给定的角度参数)

4.duration属性:[Number] – 指定使用animateTo的动画执行持续时间

例如 (click on arrow):

$(“#img”).rotate({bind:{

    click: function(){

        $(this).rotate({

            duration:6000,

            angle: 0,

            animateTo:100

        })

    }

   }

})

5. step属性:[Function] – 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数

6.  easing属性:[Function] – 默认 (see below)

默认:function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b}

Where:

t: current time,

b: begInnIng value,

c: change In value,

d: duration,

x: unused

没有渐变:No easing (linear easing):function(x, t, b, c, d) { return (t/d)*c }

     

示例1:没有效果,一直转

 $("#scImg").rotate({

                              angle:0,

                              animateTo:360,

                              callback: rotation,

                                easing: function (x,t,b,c,d){     

                                      return (t/d)*c 

                             }

                      })

   

示例2: 默认的效果

         $("#scImg").rotate({

                              angle:0,

                              animateTo:360,

                              callback: rotation,

                              easing: function (x,t,b,c,d){

return -c*((t=t/d-1)*t*t*t-1)+b 

                             }

                      }) 示例3:

$(“#img”).rotate({bind:{

    click: function(){

        $(this).rotate({

            angle: 0,

            animateTo:180,

            easing: $.easing.easeInOutElastic

            })

        }

    }

})

7.callback属性:[Function] 动画完成时执行的回调函数

例如

$(“#img”).rotate({bind:{

    click: function(){

        $(this).rotate({

            angle: 0,

            animateTo:180,

            callback: function(){ alert(1) }

            })

        }

    }

})

8. getRotateAngle这个函数只是简单地返回旋转对象当前的角度。

例如:

$(“#img”).rotate({

    angle: 45,

    bind: {

        click : function(){

        alert($(this).getRotateAngle())

        }

    }

})

9.stopRotate这个函数只是简单地停止正在进行的旋转动画。例如:

$(“#img”).rotate({

    bind: {

        click: function(){

            $(“#img”).rotate({

                angle: 0,

                animateTo: 180,

                duration: 6000

            })

        setTimeout(function(){

            $(“#img”).stopRotate()

            }, 1000)

        }

    }

})