<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>运动框架</title>
<script src="move.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
var oBtn = document.getElementById("btn1"); oBtn.onclick = function(){
move(oDiv,'right',300); //可使
//move(oDiv,'left',300); //可使
//move(oDiv,'top',300); //可使
//move(oDiv,'width',300); //可使
//move(oDiv,'height',300); //可使
} oDiv.onmouseover = function(){
move(oDiv,'opacity',100);
} oDiv.onmouseout = function(){
move(oDiv,'opacity',30);
} }
</script>
</head>
<body>
<input type="button" id="btn1" value="运动" />
<div id="div1" style="width:200px;height:200px;position:absolute;background:red;filter:alpha(opacity=30);opacity:0.3;">
</div>
</body>
</html>
js：
//height，left , top ,right ，opacity
var timer = null
function move(obj,attr,target)
{
//开启定时器
timer = setInterval(function(){
var current = 0;
if(attr=="opacity")
{
current = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
current = parseInt(getStyle(obj,attr));
} var speed = target>current ? 6 :-6; if(Math.abs(current-target)<6)
{
//清除定时器
clearInterval(timer);
}
else
{
if(attr=="opacity")
{
obj.style.filter = "alpha(opacity:"+(current + speed) +")";
obj.style.opacity = (current + speed) /100; }
else
{
obj.style[attr] = current + speed +"px";
}
} },30); } function getStyle(obj,attr)
{
if(obj.currentStyle) //用于IE
{
return obj.currentStyle[attr];
}
else
{
//document.defaultView.getComputedStyle 该方法时DOM2中才出现的方法
return document.defaultView.getComputedStyle(obj, null)[attr];
//getComputedStyle DOM1中的方法
//return getComputedStyle(obj,false)[attr];
}
}