您的位置：首页 > Web前端 > JavaScript

javascript每日一练—运动

2015-07-12 12:44 507 查看

1、弹性运动

　　运动原理：加速运动+减速运动+摩擦运动；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; list-style:none;}
#div1{ width:480px; height:120px; margin:50px auto; border:1px solid black; position:relative; overflow:hidden;}
#div1 li{ float:left; padding:10px;}
#div1 li img{ display:block;}
#div1 ul{ position:absolute;}
</style>
<script>
window.onload = function()
{
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var aBtn = document.getElementsByTagName('input');
var iSpeed = -3;
var timer = null;

oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

timer = setInterval(move, 30);

aBtn[0].onclick = function()
{
iSpeed = -3;
};

aBtn[1].onclick = function()
{
iSpeed = 3;
};

oDiv.onmouseover = function()
{
clearInterval(timer);
};

oDiv.onmouseout = function()
{
timer = setInterval(move, 30);
};

function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left = '0px';
}else if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/2 + 'px';
}
oUl.style.left = oUl.offsetLeft + iSpeed + 'px';
}

};
</script>
</head>

<body>
<input type="button" value="向左" />
<input type="button" value="向右" />
<div id="div1">
<ul>
<li><img src="images/1.jpg" width="100" height="100" /></li>
<li><img src="images/2.jpg" width="100" height="100" /></li>
<li><img src="images/3.jpg" width="100" height="100" /></li>
<li><img src="images/4.jpg" width="100" height="100" /></li>
</ul>
</div>
</body>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航