sample index :
1. 定時器的運用
2. 無縫滾動
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
#div1
{
width:200px;
height:200px;
background:red;
position:absolute;
left:200px;top:150px;
}
</style>
<script>
/*
setInterval(function()
{
var oDiv=document.getElementById('div1');
//oDiv.style.left=oDiv.offsetLeft+10+'px';
},30);
*/
</script>
</head>
<body>
<div id="div1" onClick="alert(this.offsetLeft);">
</div>
</body>
</html>
無縫滾動
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
* { margin:0;padding:0; }
#div1{
width:972px;
height:168px;
margin:100px auto;
position:relative;
background:red;
overflow:hidden;
}
#div1 ul
{
position:absolute;
left:0;
top:0;
}
#div1 ul li {float:left; width:243;
height:168px;list-style:none;}
</style>
<script>
/*
position:relative; = 相對定位
position:absolute; = 絕對定位
margin : 100px auto; = 置中
*/
window.onload=function()
{
var oDiv=document.getElementById('div1');
var oUl =oDiv.getElementsByTagName('ul')[0];
var aLi =oUl.getElementsByTagName('li');
var speed=2;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
function move()
{
if (oUl.offsetLeft < -oUl.offsetWidth/2)
{
oUl.style.left='0';
}
if (oUl.offsetLeft >0 )
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
}
var timer =setInterval (move,30);
oDiv.onmouseover=function()
{
clearInterval(timer);
}
oDiv.onmouseout=function()
{
timer =setInterval (move,30);
}
document.getElementsByTagName('a')[0].onclick=function()
{
speed=-2;
}
document.getElementsByTagName('a')[1].onclick=function()
{
speed=2;
}
}
</script>
</head>
<body>
<a href="javascript:;">Left</a>
<a href="javascript:;">right</a>
<div id="div1">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
</ul>
</div>
</body>
</html>
總結:
開啟定時器的用法
setIntercval 間隔型
setTimeout 延時型
停止定時器的方法
clearInterval
clearTimeout
留言列表
Linux (2)
{{ article.title }}