一、滑动效果<head>
<style type="text/css">
*{ margin:0px auto; padding: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:#06F; position:absolute; top:225px; z-index:10; }
#anniu:hover{ cursor:pointer}
</style>
</head>
<body>
<div id="wai">
<div id="left" style="width:200px"></div>
<div id="right" style="width:800px"></div>
</div>
<div id="anniu" style="left:175px" onclick="hua()"></div>
<script type="text/javascript">
var id;
function hua()
{
id = window.setInterval("dong()",10);
}
//滑动的方法，调一次滑动3px
function dong()
{
//改蓝色的宽度 200px
var zuo = 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";
//改黄色的宽度
var you = document.getElementById("right");
ykd = you.style.width;
ykd = parseInt(ykd.substr(0,ykd.length-2))-3;
you.style.width = ykd+"px";
//改小块的left
var hong = document.getElementById("anniu");
hleft = hong.style.left;
hleft = parseInt(hleft.substr(0,hleft.length-2))+3;
hong.style.left = hleft+"px";
}
</script>
</body>
效果图：点击按钮方块，就会向右走
二、滑轮固定
<body>
<div style="width:100%; height:100px; background-color:#63F"></div>
<div id="menu" style="width:100%; height:50px; background-color:#F36;"></div>
<input type="button" value="滚动" onclick="gun()" />
<div style="width:100%; height:1000px; background-color:#FF6"></div>
</body>
<script type="text/javascript">
window.onscroll = function(){
var d = document.getElementById("menu");
if(window.scrollY >= 100)
{
d.style.position = "fixed";
d.style.top = "0px";
}
else
{
d.style.position = "relative";
}
}
function gun()
{
window.scrollTo(0,100);
}
</script>
时间： 2024-10-10 08:13:29