JS related Small instance--sliding effect

<! DOCTYPE html Public"-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >0px}#wai{width:100%; height:500px;}#left{height:500px; Background-color: #63C; Float:left}#right{height:500px; Background-color: #FC3; Float:left}#anniu{width:50px; height:50px; Background-color: #F30; position:absolute ; top:225px; z-index:10;}#anniu:hover{Cursor:pointer}</style>varID;functionHua () {ID= Window.setinterval ("Dong ()", 10);}//Slide the method, adjust the sliding once 3pxfunctionDong () {//Change the width of blue 200px    varZuo = document.getElementById ("left"); KD= Zuo.style.width; if(parseint (KD).substr(0,kd.length-2)) >=800) {window.clearinterval (ID); return; } KD= parseint (KD).substr(0,kd.length-2)) +3; Zuo. Style.width = kd+ "px"; //Change the width of yellow    varyou = document.getElementById ("Right"); YKD= You.style.width; YKD= parseint (YKD.substr(0,ykd.length-2)) -3; You. Style.width = ykd+ "px"; //change the red left    varHong = document.getElementById ("Anniu"); Hleft= Hong.style.Left ; Hleft= parseint (hleft.substr(0,hleft.length-2)) +3; Hong. Style.left = hleft+ "px"; }</script></body>
Operation Result:
After clicking on the red area:
Final Result:
JS related Small instance--sliding effect