為啥我頻繁移動(dòng)鼠標(biāo)后，立即移出，寬度成這樣了
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>動(dòng)畫效果</title>
????<link?rel="stylesheet"?href="../css/animation2.css">
????<script?src="../js/animation2.js"></script>
</head>
<style>
*?{
????margin:?0;
????padding:?0;
}
ul,
li?{
????list-style:?none;
}
ul>li?{
????width:?200px;
????height:?100px;
????background-color:?yellow;
????margin-top:?20px;
????border:?4px?solid?#000;
}
</style>
<script>
window.onload?=?function()?{
????var?oLi?=?document.getElementsByTagName("li");
????for?(var?i?=?0;?i?<?oLi.length;?i++)?{
????????oLi[i].timer?=?null;
????????oLi[i].onmouseover?=?function()?{
????????????startMove(this,?400);
????????}
????????oLi[i].onmouseout?=?function()?{
????????????startMove(this,?200)
????????}
????}
}
function?startMove(obj,?iTarget)?{
????clearInterval(obj.timer);
????var?icur?=?parseInt(getStyle(obj,?'width'));
????var?speed?=?(iTarget?-?icur)?/?10;
????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
????obj.timer?=?setInterval(function()?{
????????icur?=?parseInt(getStyle(obj,?'width'));
????????if?(icur?==?iTarget)?{
????????????clearInterval(obj.timer);
????????}?else?{
????????????obj.style.width?=?icur?+?speed?+?"px";
????????????console.log(obj.timer,?iTarget,?icur,?speed,?obj.style.width)
????????}
????},?30);
}
function?getStyle(obj,?attr)?{
????if?(obj.currentStyle)?{
????????return?obj.currentStyle[attr];?//獲取當(dāng)前元素使用的CSS屬性值（添加過border之后的值），obj.style獲取的是內(nèi)聯(lián)樣式值
????}?else?{
????????return?getComputedStyle(obj,?false)[attr];
????}
}
</script>
<body>
????<ul>
????????<li></li>
????????<li></li>
????????<li></li>
????</ul>
</body>
</html>
2022-11-16
就是沒有把畫面跟上
2021-09-29
寬度在添加