為什么加了getStyle(obj, attr)沒有解決問題
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>動畫效果</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)
????????}
????}
}
alpha
function?startMove(obj,?iTarget)?{
????clearInterval(obj.timer);
????var?icur?=?parseInt(getStyle(obj,?'width'))
????obj.timer?=?setInterval(function()?{
????????var?speed?=?(iTarget?-?icur)?/?8;
????????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
????????if?(icur?==?iTarget)?{
????????????clearInterval(obj.timer);
????????}?else?{
????????????obj.style['width']?=?icur?+?speed?+?"px";
????????}
????},?30)
}
function?getStyle(obj,?attr)?{
????if?(obj.currentStyle)?{
????????return?obj.currentStyle[attr];?//獲取當前元素使用的CSS屬性值（添加過border之后的值），obj.style獲取的是內聯樣式值
????}?else?{
????????return?getComputedStyle(obj,?false)[attr];
????}
}
</script>
<body>
????<ul>
????????<li></li>
????????<li></li>
????????<li></li>
????</ul>
</body>
</html>
2022-11-16
是里面的方法寫的有問題
2021-09-29
就是沒有這個樣式再添加這個樣式的意思