Sample Index
1. 多物體運動框架
2. 多物體同時運動
3. 物體的淡入淡出
4. 運動框架
- 變高
- 變寬
- Font size
- border
- 多個物體同時運動
效果: 滑鼠放上去 div會自動變寬，然後滑鼠移開後，div會回到原本的寬度。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
div
{
width:100px;
height:50px;
background:red;
margin:10px;
}
</style>
<script>
/*
多物體同時運動
- 讓每一個div都有一個定時器
*/
window.onload=function()
{
var aDiv=document.getElementsByTagName('div');
for(var i = 0 ; i<aDiv.length;i++)
{
//加一個自定義的屬性在上面
//這樣每個物體都有一個定時器了
aDiv[i].timer = null;
aDiv[i].onmouseover=function()
{
startMove(this,400);
}
aDiv[i].onmouseout=function()
{
startMove(this,100);
}
}
}
var timer=null;
function startMove(obj,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var speed=(iTarget-obj.offsetWidth)/6;
speed=speed>0? Math.ceil(speed):Math.floor(speed);
if (obj.offsetWidth==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.style.width=obj.offsetWidth+speed+'px';
}
},30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
淡入淡出
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
#div1
{
width:200px;
height:200px;
background:red;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script>
var timer = null;
var alpha = 30;
function startMove(iTarget)
{
var oDiv= document.getElementById('div1');
clearInterval (timer);
var speed=0;
if (alpha<iTarget)
{
speed=5;
}
else
{
speed=-5;
}
timer = setInterval(function()
{
if (alpha==iTarget)
{
clearInterval(timer);
}
else
{
alpha+=speed;
oDiv.style.filter='alpha(opacity:'+alpha+')';
oDiv.style.opacity=alpha/100;
}
},30);
}
window.onload=function()
{
var oDiv=document.getElementById('div1' );
oDiv.onmouseover=function()
{
startMove(100);
}
oDiv.onmouseout=function()
{
startMove(30);
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
運動框架
- 變高
- 變寬
- Font size
- Border
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
div
{
width:200px;
height:200px;
margin:20px;
float:left;
background:#CCC;
border:10px solid black;
font-size:16px;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script>
window.onload=function()
{
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
var oDiv4=document.getElementById('div4');
//變高
oDiv1.onmouseover=function()
{
startMove(this,'height',400);
}
oDiv1.onmouseout=function()
{
startMove(this,'height',200);
}
//變框
oDiv2.onmouseover=function()
{
startMove(this,'width',400);
}
oDiv2.onmouseout=function()
{
startMove(this,'width',200);
}
//font size 變大
oDiv3.onmouseover=function()
{
startMove(this,'fontSize',50);
}
oDiv3.onmouseout=function()
{
startMove(this,'fontSize',16);
}
// board width
oDiv4.onmouseover=function()
{
startMove(this,'borderWidth',50);
}
oDiv4.onmouseout=function()
{
startMove(this,'borderWidth',10);
}
}
function getStyle(obj,name)
{
if (obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,attr,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var cur = parseInt(getStyle(obj,attr));
var speed=(iTarget- cur)/6;
speed = speed>0? Math.ceil(speed):Math.floor(speed);
if (cur==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.style[attr]= cur+speed+'px';
}
},30);
}
</script>
</head>
<body>
<div id="div1">變高</div>
<div id="div2">變寬</div>
<div id="div3">Font</div>
<div id="div4">border</div>
</body>
</html>
運動框架2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
div
{
width:200px;
height:200px;
margin:20px;
float:left;
background:yellow;
border:10px solid black;
font-size:16px;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script>
window.onload=function()
{
var oDiv1=document.getElementById('div1');
oDiv1.onmouseover=function()
{
startMove(this,'width',100);
}
oDiv1.onmouseout=function()
{
startMove(this,'width',30);
}
}
function getStyle(obj,name)
{
if (obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,attr,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var cur= 0 ;
if (attr=='opacity')
{
//round = 四捨五入
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur=parseInt(getStyle(obj,attr));
}
var speed=(iTarget-cur)/6;
speed = speed > 0 ?Math.ceil(speed):Math.floor(speed);
if (cur == iTarget)
{
clearInterval(obj.timer);
}
else
{
if (attr='opacity')
{
obj.style.filter='alpha(opacity:'+ (cur+speed) +')';
obj.style.opacity=(cur+speed)/100;
var oTxt = document.getElementById ('txt1');
oTxt.value = obj.style.opacity;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
},30);
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="text" id="txt1" />
</body>
</html>
留言列表
Linux (2)
{{ article.title }}