Tip: you can modify some code before running
<!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><title>The effect of sliding between the left and right sides of the webpage to switch the width of both sides</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">Html, body {height: 100%; overflow: hidden;} body {margin: 0px; padding: 0px; background: #000 ;}# huakuai {width: 800px; height: 100%; top: 0px; right:-400px; background: # ff0000; position: absolute;} # but {width: 100px; height: 100px; left:-50px; top: 50%; display: inline; margin:-50px 0 0 0; position: absolute; background: # fff; cursor: pointer ;}</style><script type="text/javascript">Window. onload = function () {var oRight = document. getElementById ('huakuai'); var oBut = document. getElementById ('but'); var oPath = true; oBut. onclick = function () {if (oPath) {sMove (oRight, 'right', 0); oPath = false;} else {sMove (oRight, 'right ', -400); oPath = true ;}}; function getStyle (obj, attr) {return obj. currentStyle? Obj. currentStyle [attr]: getComputedStyle (obj, false) [attr];} function sMove (obj, attr, iT) {clearInterval (obj. timer); obj. timer = setInterval (function () {dMove (obj, attr, iT) ;}, 30) ;}function dMove (obj, attr, iT) {var iCur = 0; iCur = parseInt (getStyle (obj, attr); var iS = (iT-iCur)/5; iS = iS> 0? Math. ceil (iS): Math. floor (iS); iCur = iT? ClearInterval (obj. timer): obj. style [attr] = iCur + iS + 'px ';}};</script></head><body><!--把下面代码加到<body>与</body>之间--><div >Content on the left</div><div id="huakuai"> <div id="but">Click here to slide</div><!--可使用箭头进行切换--> <div >Content on the right</div></div></body></html></td> </tr></table>
Tip: you can modify some code before running
