多物體多屬性維度的運動框架示例
阿新 • • 發佈：2019-02-13
讓不同的div區塊從寬度（width）、高度（height）、邊框(border)、文字大小（font-size）、不透明度(opacity)等多個維度實現JS運動框架構建。
HTML程式碼部分
<div class='div1'>變寬</div> <div class="div1">變高</div> <div class="div1">邊框變大</div> <div class="div1">字型變大</div> <div class="div1">改變不透明度</div>
CSS樣式表
.div{float:left;width:200px;height:200px;background:red;padding:0;opacity:1;margin:5px;border:3px;}針對寬度（width）、高度（height）、邊框(border)、文字大小（font-size）構建的運動框架。
window.onload=function() { var oDiv=document.getElementsByClassName('div1'); oDiv[0].onmouseover=function(){ startMove(this,'width',400) } oDiv[0].onmouseout=function(){ startMove(this,'width',200) } oDiv[1].onmouseover=function(){ startMove(this,'height',400) } oDiv[1].onmouseout=function(){ startMove(this,'height',200) } oDiv[2].onmouseover=function(){ startMove(this,'borderWidth',10) } oDiv[2].onmouseout=function(){ startMove(this,'borderWidth',3) } oDiv[3].onmouseover=function(){ startMove(this,'fontSize',32) } oDiv[3].onmouseout=function(){ startMove(this,'fontSize',16) } } function getStyle(obj,name) { if(getComputedStyle(obj,null)[name]) { return getComputedStyle(obj,null)[name]; //fireFox、chrome } else { return obj.currentStyle[name]; //IE } } function startMove(obj,attr,iTarget) { clearInterval(obj.timer); obj.timer=setInterval(function(){ var cur=0; cur=parseInt(getStyle(obj,attr)); var speed=(iTarget-cur)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget) { clearInterval(obj.timer); } else { obj.style[attr]=cur+speed+'px'; } },30) }
不透明度(opacity)屬性值不帶“px”，需要單獨設定
window.onload=function() { var oDiv=document.getElementsByClassName('div1'); oDiv[0].onmouseover=function(){ startMove(this,'width',400) } oDiv[0].onmouseout=function(){ startMove(this,'width',200) } oDiv[1].onmouseover=function(){ startMove(this,'height',400) } oDiv[1].onmouseout=function(){ startMove(this,'height',200) } oDiv[2].onmouseover=function(){ startMove(this,'borderWidth',10) } oDiv[2].onmouseout=function(){ startMove(this,'borderWidth',3) } oDiv[3].onmouseover=function(){ startMove(this,'fontSize',32) } oDiv[3].onmouseout=function(){ startMove(this,'fontSize',16) } oDiv[4].onmouseover=function(){ startMove(this,'opacity',30) } oDiv[4].onmouseout=function(){ startMove(this,'opacity',100) } } function getStyle(obj,name) { if(getComputedStyle(obj,null)[name]) { return getComputedStyle(obj,null)[name]; //fireFox、chrome } else { return obj.currentStyle[name]; //IE } } function startMove(obj,attr,iTarget) { clearInterval(obj.timer); obj.timer=setInterval(function(){ var cur=0; if(attr=="opacity") { cur=Math.round(parseFloat(getStyle(obj,attr))*100); } else { cur=parseInt(getStyle(obj,attr)); } var speed=(iTarget-cur)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget) { clearInterval(obj.timer); } else { if(attr=="opacity") { cur+=speed; obj.style.fliter='alpha(opacity:'+cur+')'; obj.style.opacity=cur/100; } else { obj.style[attr]=cur+speed+'px'; } } },30) }
[1]函式getStyle（obj,name)獲取的值如width、height、borderSize等為帶有單位的字串，並非數字。
function getStyle(obj,name){
if(getComputedStyle(obj,null)[name])
{
return getComputedStyle(obj,null)[name];
}
else
{
return obj.CurrentStyle[name];
}
}完整的原始碼
<!doctype html>
<html>
<head>
<title>多物體多屬性維度的運動示例</title>
<meta charset="utf-8">
<style>
.div1{float:left;width:200px;height:200px;background:red;padding:0;opacity:1;filter:alpha(opacity=100);margin:5px;border:3px solid black;text-align:center;}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementsByClassName('div1');
oDiv[0].onmouseover=function(){
startMove(this,'width',400)
}
oDiv[0].onmouseout=function(){
startMove(this,'width',200)
}
oDiv[1].onmouseover=function(){
startMove(this,'height',400)
}
oDiv[1].onmouseout=function(){
startMove(this,'height',200)
}
oDiv[2].onmouseover=function(){
startMove(this,'borderWidth',10)
}
oDiv[2].onmouseout=function(){
startMove(this,'borderWidth',3)
}
oDiv[3].onmouseover=function(){
startMove(this,'fontSize',32)
}
oDiv[3].onmouseout=function(){
startMove(this,'fontSize',16)
}
oDiv[4].onmouseover=function(){
startMove(this,'opacity',30)
}
oDiv[4].onmouseout=function(){
startMove(this,'opacity',100)
}
}
function getStyle(obj,name)
{
if(getComputedStyle(obj,null)[name])
{
return getComputedStyle(obj,null)[name];
//fireFox、chrome
}
else
{
return obj.currentStyle[name];
//IE
}
}
function startMove(obj,attr,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
if(attr=="opacity")
{
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur=parseInt(getStyle(obj,attr));
}
var speed=(iTarget-cur)/30;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget)
{
clearInterval(obj.timer);
}
else
{
if(attr=="opacity")
{
cur+=speed;
obj.style.fliter='alpha(opacity:'+cur+')';
obj.style.opacity=cur/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
},30)
}
</script>
</head>
<body>
<div class='div1'>變寬</div>
<div class="div1">變高</div>
<div class="div1">邊框變大</div>
<div class="div1">字型變大</div>
<div class="div1">改變不透明度</div>
</body>
</html>