到底是哪里有問題??？？？？
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
?? ?<title>多物體運動</title>
?? ?<link rel="stylesheet" type="text/css" href="css/style.css">
?? ?<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
?? <ul>
? ??? ?<li ></li>
? ??? ?<li ></li>
? ??? ?<li ></li>
?? </ul>
</body>
</html>
CSS
ul li{
?? ?list-style:none;
?? ?width: 200px;
?? ?height: 100px;
?? ?margin-top: 20px;
?? ?background: yellow;
?? ?cursor: pointer;
}
JS
window.onload=function(){
?? ?var ali=document.getElementsByTagName('li');
???? for(var i=0;i<ali.length;i++){
??? ??? ?ali[i].onmouseover=function(){
?????????? setWidth(this,400);
?? ???? }
?? ???? ali[i].onmouseover=function(){
?? ??? ??? setWidth(this,200);
?? ???? }
???? }
?? ?
}
var timer=null;
function setWidth(obj,target){
?? ?clearInterval(timer);
??? timer=setInterval(function(){
?? ??? ???? var speed=(target-obj.offsetWidth)/5;
??????????? speed=speed>0?Math.ceil(speed):Math.floor(speed);
??????????? if(obj.offsetWidth==target){
?????????? ??? ?clearInterval(timer);
??????????? }
??????????? else{
?????????? ??? ?obj.style.width=obj.offsetWidth+speed+"px";
??????????? }
??????? },30);
}
2016-11-18
好吧 又找到錯誤了！應該是鼠標離開事件，寫成了鼠標滑過事件