javascript 左右滑动切换两侧宽度的效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!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>网页左右滑动切换两侧宽度的效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
html,body{
       height:100%;
       overflow:hidden;
}
body{
       margin:0px;
       padding:0px;
       background:#000;
}
#huakuai{
       
       height:100%;
       top:0px;
       right:-400px;
       background:#ff0000;
       position:absolute;
}
#but{
       
       
       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>

<div style="color:#ffffff">左侧内容</div>
<div id="huakuai">
  <div id="but">点击这里滑动</div>
  <div style="color:#ffffff">右侧内容</div>
</div>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

javascript 左右滑动切换两侧宽度的效果

相关文章

精彩推荐