//这是demo01.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link rel="stylesheet" type="text/css" href="css/demo01.css"/><script src="js/demo01.js"></script></head><body><ul> <li></li> <li></li> <li></li> <li></li></ul></body></html>//demo01.css*{margin:0;padding:0;}ul,li{ list-style:none;}ul li { width:200px; height:100px; background:#FF0; margin-bottom:2px;}//demo01.jswindow.onload = function(){ var lis = document.getElementsByTagName("li"); for(var i = 0 ; i < lis.length ; i++){ lis[i].onmouseover = function(){ startMove(this,400); } lis[i].onmouseout = function(){ startMove(this,200); } } var timer = null; function startMove(obj,target){ clearInterval(timer); obj.timer = function(){ setInterval(function(){ var speed = (target - obj.offsetWidth)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth == target){ clearInterval(timer); }else{ obj.style.width = obj.offsetWidth + speed + 'px'; } },30); } }}
添加回答
举报
0/150
提交
取消