首页 > 代码库 > 例子：滑动效果

例子：滑动效果

2024-08-21 23:43:15   218人阅读

一、滑动效果
<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="http://www.mamicode.com/滚动" 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>

　　

　

例子：滑动效果


联系
我们