                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

我的跟老師寫的一樣,但是沒有變大的效果,怎么回事?

? ? <style>

? ? ? ? * { margin:0px; padding:0px;}

? ? ? ? .top { width:200px; overflow:hidden; float:left;}

? ? ? ? .top ul {width:200px; overflow:hidden; float:left; }

? ? ? ? .top ul li { width:200px; height:100px; background:#ffd800; float:left; margin-bottom:20px;}

? ? </style>

? ? window.onload = function () {

? ? ? ??

? ? ? ? var count = document.getElementsByTagName("li");

? ? ? ? for (var i = 0; i < count.length; i++) {

? ? ? ? ? ? count[i].onmouseover = function () {

? ? ? ? ? ? ? ? startMove(this, 400);

? ? ? ? ? ? }

? ? ? ? ? ? count[i].onmouseout = function () {

? ? ? ? ? ? ? ? startMove(this, 200);

? ? ? ? ? ? }

? ? ? ? }

? ? }

? ? var time = null;

? ? function startMove(obj, end) {

? ? ? ? clearInterval(time);

? ? ? ? time = setInterval(function () {

? ? ? ? ? ? var speed = (end - obj.offsetWidth) / 8;

? ? ? ? ? ? speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

? ? ? ? ? ? if (obj.offsetWidth == end) {

? ? ? ? ? ? ? ? clearInterval(time);

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? obj.style.width = obj.offsetWidth + speed + 'px';

? ? ? ? ? ? }

? ? ? ? }, 30)

? ? }

</script>

<body>

? ? <ul>

? ? ? ?<li></li>

? ? </ul>

</div>

哪位小伙伴能幫我看看,非常感謝

好雪君

2015-10-27

源自：JS動畫效果 4-1

關(guān)注問題我要回答

1075

操作

收起

3 回答

Aurora丶回答被采納 +3 積分
2015-10-31

這個代碼的完整答案是這樣的

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>demo</title>
<style?type="text/css">
*{margin:?0;padding:?0;}
ul{list-style-type:?none;}
ul?li{width:?200px;height:?100px;background:?yellow;margin-bottom:?20px;}
</style>
<script?type="text/javascript">
window.onload?=?function(){
var?oLi?=?document.getElementsByTagName('li');
for(var?i?=?0?;?i?<?oLi.length?;?i++){
oLi[i].timer?=?null;
oLi[i].onmouseover?=?function(){
starMove(this,400);
}
oLi[i].onmouseout?=?function(){
starMove(this,200);
}
}
}
function?starMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer?=?setInterval(function(){
var?speed?=?(iTarget?-?obj.offsetWidth)/5;
speed=speed>0???Math.ceil(speed):Math.floor(speed);?
if?(obj.offsetWidth?==?iTarget)?{
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>