幫忙看一看!
<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>Document</title>
</head>
<style type="text/css">
*{
?? ?margin:0;
?? ?padding:0;
}
ul,li{
?? ?list-style: none;
}
ul li{
?? ?width: 200px;
?? ?height: 100px;
?? ?background: yellow;
?? ?margin-bottom: 20px;
??? border: 10px solid #000;
?? ?font-size:12px;
}
</style>
<script type="text/javascript">
window.onload=function(){
?? ?var aLi=document.getElementsByTagName('li');
?? ?for(var i=0;i<aLi.length;i++){
?? ??? ?aLi[i].timer=null;?
?? ??? ?aLi[i].onmouseover=function(){
?? ??? ??? ?startMove(this,400);
?? ??? ?}
?? ??? ?aLi[i].onmouseout=function(){
?? ??? ??? ?startMove(this,200);
?? ??? ?}
?? ?}
}
function startMove(obj,iTarget){?
?? ?var aLi=document.getElementsByTagName('li');
?? ?clearInterval(obj.timer);
?? ?obj.timer=setInterval(function(){
?? ??? ?var speed=(iTarget-obj.offsetWidth)/10;
?? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ?if(iTarget==obj.offsetWidth){
?? ??? ??? ?clearInterval(obj.timer);
?? ??? ?}else{
?? ??? ???? obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';
?? ??? ?}
?? ?},30);
}
function getStyle(obj,attr){
?? ?if(obj.currentStyle){
?? ??? ?return obj.currentStyle[attr];
?? ?}else{
?? ??? ?return getComputedStyle(obj,false)[attr];
?? ?}
}
</script>
<body>
?? ?<ul>
?? ??? ?<li >a</li>
?? ??? ?<li>a</li>
?? ??? ?<li>a</li>
?? ?</ul>
</body>
</html>
為什么本來(lái)200的元素 一旦執(zhí)行? 后面就變成180了? 剛好少了border*2
而且最多變不到400? 只能到380
2017-02-19
?var speed=(iTarget-obj.offsetWidth)/10;和?if(iTarget==obj.offsetWidth)中的 obj.offsetWidth 也要改成parseInt(getStyle(obj,'width')) ?
加了邊框 obj.offsetWidth的值肯定會(huì)增加border*2
2017-01-16
?var speed=(iTarget-obj.offsetWidth)/10;
這個(gè)是不是除以8啊
2017-01-01
還斗膽請(qǐng)教一下改進(jìn)方法
2017-01-01
幫忙分析一下！?。〈笊? 這是一個(gè)多物體緩沖運(yùn)動(dòng)的例子