//百度之后知道offsetWidth包含了邊框厚度,請問怎么解決有邊框的時候恢復初始位置?
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>多物體運動</title>
????<style>
????????*?{
????????????margin:?0;
????????????padding:?0;
????????}
????????ul?{
????????????display:?block;
????????}
????????li?{
????????????width:?200px;
????????????height:?100px;
????????????background-color:?#ccc;
????????????margin-top:?20px;
????????????border:?1px?solid;
????????}
????</style>
????<script>
????????window.onload?=?function?()?{
????????????var?list?=?document.getElementsByTagName("li");
????????????for?(var?i?=?0;?i?<?list.length;?i++)?{
????????????????list[i].timer?=?null;
????????????????list[i].onmouseover?=?function?()?{
????????????????????oMove(this,?400);
????????????????}
????????????????list[i].onmouseout?=?function?()?{
????????????????????oMove(this,?200);
????????????????}
????????????}
????????????function?oMove(obj,?iTag)?{
????????????????clearInterval(obj.timer);
????????????????obj.timer?=?setInterval(function?()?{
????????????????????var?speed?=?(iTag?-?obj.offsetWidth)?/?8;
????????????????????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
????????????????????if?(obj.offsetWidth?==?iTag)?{
????????????????????????console.log(obj.offsetWidth);
????????????????????????clearInterval(obj.timer);
????????????????????}?else?{
????????????????????????obj.style.width?=?obj.offsetWidth?+?speed?+?'px';
????????????????????}
????????????????},?30);
????????????}
????????}
????</script>
</head>
<body>
<ul>
????<li></li>
????<li></li>
????<li></li>
</ul>
</body>
</html>
自己的實驗中,給每個div設置了邊框,導致div回復不了初始位置,請問怎么解決有邊框的時候恢復初始位置?
wuzhoubo
2016-02-26 13:28:35