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

JavaScript034

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)

}

-moz-transform:scale(-1，1)

表示水平翻转；

-moz-transform:scale(1，-1)

表示垂直翻转。

顺时针旋转图片90度

picID.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"

旋转180度

picID.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"

逆时针旋转90度

picID.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"

给指定的元素添加一个 CSS 属性即可：

-o-transform: rotate(90deg)

-ms-transform: rotate(90deg)

-moz-transform: rotate(90deg)

-webkit-transform: rotate(90deg)

transform: rotate(90deg)

但仅对 IE8+ 或其他浏览器有效。

如果非得兼容 IE7 的话需要使用 filter 滤镜 DXImageTransform.Microsoft.Matrix。这个参数过于复杂，这里不展开写了，题主可以自行搜索一下相关信息。

楼上说的 jquery-rotate 在 IE7、8 上表现还可以，在 IE9 里反倒有坑，题主可以自行选择是否使用。