1.運動框架
- 在開始運動時，關閉已經有的定時器
-把運動和停止隔開
2.運動框架實例
- 例子 : "分享到" 測邊攔
通過目標點，計算速度值
- 淡入淡出的圖片
用變量存儲透明度
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
#div1
{
width:200px;
height:200px;
background:#CCC;
position:absolute;
top:50px;
left:0px;
}
</style>
<script>
var timer=null;
function startMove()
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
var speed=1;
timer=setInterval(function()
{
if (oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
window.onload=function()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
startMove();
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="move"/>
<div id="div1">
</div>
</body>
</html>
測邊分享
通常用來放廣告的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
#div1
{
width:150px;
height:200px;
background:green;
position:absolute;
left:-150px;
}
#div1 span
{
position:absolute;
width:20px;
height:60px;
line-height:20px;
background:#8CAEF3;
right:-20px;
top:70px;
}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function()
{
startMove(0);
}
oDiv.onmouseout=function()
{
startMove(-150);
}
}
var timer=null;
function startMove(iTarget)
{
var speed = 0 ;
var oDiv=document.getElementById('div1');
if (oDiv.offsetLeft > iTarget)
{
speed = -10;
}
else
{
speed = 10 ;
}
clearInterval(timer);
timer=setInterval(function()
{
if (oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</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>
留言列表
Linux (2)
{{ article.title }}