运动雏形

wzg489326 · 发表于 2013-2-7 21:22:55

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title> tt </title> <style type="text/css"> div#top { position: relative; top: 50px; left: 200px; z-index: 10; width: 200px; height: 200px; background-color: red; } div#top button { margin-left: 50px; } </style></head><body style="aqua;overflow-x:hidden;"><script type="text/javascript"> var left1 = -280; var left2 = -280; var top = 40; var i = 0; var j = 0; var set; var set2; function dong() { document.getElementById("img1").style.left = (left1 + i) + 'px'; i = i + 10; set = setTimeout('dong();', 100); if (i == 1010) { other(); } if (i == 1280) { clearTimeout(set); document.getElementById("img1").style.left = left1 + 'px'; i = 0; } } function other(type) { document.getElementById("img2").style.left = (left2 + j) + 'px'; j = j + 10; set2 = setTimeout('other();', 100); if (j == 1010) { dong(); } if (j == 1280) { clearTimeout(set2); document.getElementById("img2").style.left = left2 + 'px'; j = 0; } } function zanting() { clearTimeout(set); clearTimeout(set2); } function stop() { clearTimeout(set); clearTimeout(set2); i = 0; j = 0; document.getElementById("img2").style.left = left2 + 'px'; document.getElementById("img1").style.left = left1 + 'px'; } function jixu() { if (j > 0) { set2 = setTimeout('other();', 100); } if (i > 0) { set = setTimeout('dong();', 100); } }</script><div id="top"> <button type="button" >click me</button> <button type="button" >stop me</button></div><div id="img1" style="position:absolute;top:300px;left:-280px;border:1px solid black;z-index:10;"> <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" onmouseout="jixu();"/></div><div id="img2" style="position:absolute;top:300px;left:-280px;border:1px solid black;z-index:10;"> <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" onmouseout="jixu();"/></div></body></html>
修改后
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title> tt </title> <style type="text/css"> div#top { position: relative; top: 50px; left: 200px; z-index: 10; width: 200px; height: 200px; background-color: red; } div#top button { margin-left: 50px; } </style></head><body style="overflow-x:hidden;width:1280px;"><script type="text/javascript"> var left1 =0; var i = 0; var set; function dong() { document.getElementById("img").style.left = (left1 + i) + 'px'; i = i + 10; set = setTimeout('dong();', 100); if (i == 1010) { document.getElementById("img").style.left=0+'px'; i=0; } }</script><div id="top"> <button type="button" >click me</button></div><div id="img" style="position:absolute;top:300px;left:0px;height:300px;"><div id="img1" style="position:absolute;top:0px;left:0px;border:1px solid black;"> <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" /></div><div id="img2" style="position:absolute;top:0px;left:-1010px;border:1px solid red;"> <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" /></div></div></body></html>

		自动登录	找回密码
密码			立即注册