<html>
<head>
<title></title>
<style>
body,ul{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
margin-bottom: 30px;
}
ul{
margin-top: 30px;
}
.rbar{
width: 200px;
height: 50px;
background: pink;
}
</style>
<script src="file:///F:front end/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li class="rbar">喵喵</li>
<li class="rbar">汪汪</li>
<li class="rbar">嘎嘎</li>
<li class="rbar">呱呱</li>
</ul>
<script>
window.onload =function(){
var liArray = document.getElementsByTagName('li');
for(var i=0;i<liArray.length;i++){
liArray[i].timer = null;//如若写成var liArray[i].timer = null;是错的，这样相当于创建一个变量并赋值
liArray[i].onmouseover = function(){
startMove(this,300);
}
liArray[i].onmouseout = function(){
startMove(this,200);
}
}
}
// var timer = null;
function startMove(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target-obj.offsetWidth)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth == target){
clearInterval(obj.timer);
}
else{
obj.style.width = obj.offsetWidth + speed + 'px';
}
},30);
}
</script>
</body>
</html>小结：
一、把获取元素的getElementsByTagName和getElementsByName混淆；
js获取元素方法有（来自百度知道：http://zhidao.baidu.com/link?url=5ScmL01JHQpvxpwYf4bHrClW-BBXJYl3QO8ePZQlqkqYu-N1yUnhGJtMTi5sDQKR8a5lk3uPUrnUDLKALecFqq）：
1、getElementById ：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。
2、getElementsByName：getElementsByName(name)该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以getElementsByName() 方法返回的是所有匹配元素组成的数组，而不是一个元素。
3、getElementsByTagName：getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。
getElementsByTagName() 可被用于任何的 HTML 元素
如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
二、注意timer的问题，由于多物体，则会出现争夺定时器情况，当鼠标在标签卡之间切换速度过快时，达不到预期效果。
600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
