<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>
