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

JavaScript09

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)

}

1、首先准备一个HTML文档,文档中准备好两个图片,接下来会对这两个图片进行旋转。

2、然后对HTML中的内容定义一些样式,如下图所示,主要是标题以及ul的样式。

3、接下来就给图片所在的li定义宽高,如下图所示。

4、然后给图片设置过渡效果,过渡使用transition属性,如下图所示。

5、当鼠标悬停在图片上时,通过rotate给其设置变形,如下图所示,正数代表的是顺时针,负数代表的是逆时针。

6、最后运行程序,会看到如下图所示的效果,鼠标放在图片上会顺时针或者逆时针旋转。

1.在页面div中创建一个空白表,可以根据需要对其进行定制。

2.创建表之后,我们可以编写关键代码来动态生成表。我们编写了一个js方法来触发使用。

3.在<TB >标签中,我们添加了标签,主要用于提供用户输入参数,而全局变量num主要用于区分每个添加参数的唯一id。

4.获取表中的数据,以供下图参考。

5.一旦我们获得了表中的数据,我们就应该将其转换成json数据的形式。