标签：
点击按钮开始整体右移，移动至蓝色区域全部显示出来停止。
<!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> <style type="text/css"> * { margin:0px; padding:0px; } #wai { width:0px; height:600px; } </style> </head> <body> <input id="anniu1" type="image" value="开始" src="12Nc43961Z-15Y04.png" style=" width:40px; height:40px;position:absolute;left:190px; top:300px; margin-left:0px; display:block" onclick="right()" />--按钮1 <input id="anniu2" type="image" value="开始" src="Kuaiwan.ico" style=" width:40px; height:40px;position:absolute;right:190px; top:300px; margin-right:0px; display:none" onclick="left()" />--按钮2 <div style="width:100%; height:600px; overflow:hidden">--限制图片大小，超出部分隐藏 <div style="width:3200px; height:600px;"> <div id="d1" style="width:1349px; height:600px; background-color:#309; float:left; margin-left:-1149px;">--蓝色图片 </div> <div id="d2" style="width:1349px; height:600px; background-color:#F03; float:left;">--红色图片 </div> </div> </div> </body> <script type="text/javascript"> function right()//向右滑动 { if(parseInt(d1.style.marginLeft)<=-200)//蓝色图片左边距小于-200，始终给红色留下200px显示 { var a=parseInt(d1.style.marginLeft)+5; d1.style.marginLeft=a+"px"; var aa=parseInt(anniu1.style.marginLeft)+5; anniu1.style.marginLeft=aa+"px"; window.setTimeout("right()",3);//每隔3毫秒蓝色图片和按钮1的边距各加5像素 } else//if(parseInt(anniu1.style.marginLeft)>=949) { anniu1.style.display="none";//图片和按钮1到头隐藏，显示按钮2，按钮1边距归零 anniu2.style.marginRight="0px"; anniu2.style.display="block"; } } function left()//向左滑动 { if(parseInt(d1.style.marginLeft)>-1149)//图片和按钮2向左每隔3毫秒增加5px滑动，到左边距为-1149px时停止滑动 { var b=parseInt(d1.style.marginLeft)-5; d1.style.marginLeft=b+"px"; var bb=parseInt(anniu2.style.marginRight)+5; anniu2.style.marginRight=bb+"px"; window.setTimeout("left()",3); } else//if(parseInt(d1.style.marginLeft)<=-1149)滑动到头时，按钮1显示，按钮2隐藏，按钮2左边距归零 { //alert("2"); anniu2.style.display="none"; anniu1.style.marginLeft="0px"; anniu1.style.display="block"; } } </script> </html>
标签：
原文地址：http://www.cnblogs.com/SJP666/p/4710307.html
