整个网页左右两栏可滑动改变宽度效果，用鼠标来点击按钮可实现滑动效果，自定义滑动宽度大小。
<!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=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>网页左右滑动切换两边宽度效果_武鸣人</title>
<style type="text/css">
html,body{
height:100%;
overflow:hidden;
}
body{
margin:0px;
padding:0px;
background:#000;
}
#www_wuming_ren{
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('www_wuming_ren');
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';
}
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div style="color:#ffffff">努力是一种状态，与年龄无关，越努力越幸运</div>
<div id="www_wuming_ren">
<div id="but">点这里滑动</div><!--可使用箭头进行切换-->
<div style="color:#ffffff">欢迎收藏本站，或者推荐给您身边需要的朋友！</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处