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

JavaScript079

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)

}

如果用js控制,需要遍历HTML文档,提取最后的DIV,然后再加样式:

<script type="text/javascript">

$(document).ready(function(){

$("div").last().addClass('highlight') //添加class

$("div").last().css("background", "red")//直接添加样式

})

</script>

如果是css控制,需要在div里面添加class样式,或者写行内样式控制:

<div style="color:red" class="color">内容</div>

<style>

.color{color:red}

</style>

<!DOCTYPE HTML>

<html>

<head>

<title>Page Title</title>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />

<style>

.wrap{

margin: 0 auto

width:1000px

height:1000px

border:1px solid gray

}

.wrap>div{

float:left

}

.wrap>#p{

width:80%

height:1000px

position:relative

overflow:auto

border:1px solid gray

}

div.d{

width:19%

height:1000px

}

#dd{

width:100px

height:100px

left:300px

top:300px

position:absolute

background-color:#c81623

}

</style>

<script>

onload=function(){

var div=document.getElementById("dd")

var sf=document.getElementById("sf")

var ydx=document.getElementById("ydx")

var ydy=document.getElementById("ydy")

var p=document.getElementById("p")

sf.value=parseFloat(getStyle(div,"width"))*100/500

ydx.value=parseFloat(getStyle(div,"left"))*100/parseFloat(getStyle(p,"width"))

ydy.value=parseFloat(getStyle(div,"top"))*100/parseFloat(getStyle(p,"height"))

}

var rotate=function(obj){

var div=document.getElementById("dd")

div.style['transform'] = div.style['-webkit-transform'] = 'rotate(' + obj.value*360*0.01 + 'deg)'

var scale=function(obj,w){

var div=document.getElementById("dd")

var h=parseFloat(getStyle(div,"height"))

var ww=parseFloat(getStyle(div,"width"))

div.style.height=div.style.width=w*0.01*obj.value +"px"

var lef=parseFloat(getStyle(div,"left"))

var tp = parseFloat(getStyle(div,"top"))

div.style.left=lef-(parseFloat(div.style.width)-ww)/2+"px"

div.style.top=tp-(parseFloat(div.style.height)-h)/2+"px"

}

var movex=function(obj,w){

var div=document.getElementById("dd")

var p=document.getElementById("p")

div.style.left=obj.value*0.01*(parseFloat(getStyle(p,"width"))-parseFloat(getStyle(div,"width")))+"px"

}

var movey=function(obj,w){

var div=document.getElementById("dd")

var p=document.getElementById("p")

div.style.top=obj.value*0.01*(parseFloat(getStyle(p,"height"))-parseFloat(getStyle(div,"height")))+"px"

}

var getStyle=function(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr]

}else if(window.getComputedStyle){

var styleVal = window.getComputedStyle(obj, null)[attr] 

? window.getComputedStyle(obj, null)[attr] :

           window.getComputedStyle(obj, null).getPropertyValue(attr)

           return styleVal

}

}

</script>

</head>

<body>

 <div class="wrap">

  <div id="p">

  <div id="dd"></div>

  </div>

  <div class="d">

  旋转:

    <input type="range" id="xz" max=100 min=0 value=0 oninput="rotate(this)"  />

    缩放:

    <input type="range" id="sf" max=100 min=0 value=0 oninput="scale(this,500)" />

    移动X:

    <input type="range" id="ydx" max=100 min=0 value=0 oninput="movex(this)" />

    移动Y:

    <input type="range" id="ydy" max=100 min=0 value=0 oninput="movey(this)"/>

  </div>

 </div>

</body>

</html>