想做个随荧幕滚动儿滚动的垂直导航-JavaSript-爱易网页

想做个随荧幕滚动儿滚动的垂直导航

日期：2014-05-16　浏览次数：20388 次

想做个随屏幕滚动儿滚动的垂直导航
想做个随屏幕滚动儿滚动的垂直导航，没思路了。。。。请教这样的效果应该怎么实现呀

<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>固定悬浮垂直导航 - 联系</title>

<style>

body { margin:0;}

ul,li { display:block; margin:0; padding:0; list-style-type:none;}

#wrap { width:950px; margin:0 auto; position:relative;}

ul#ul li { height:255px; font-size:100px; text-align:center; line-height:200px; color:white;}

ul#ul li.li1 { background:black;}

ul#ul li.li2 { background:green;}

ul#ul li.li3 { background:blue;}

ul#ul li.li4 { background:red;}

ul#ul li.li5 { background:yellow;} 



ul#nav { width:100px; background:purple; color:#AAA; border0:1px solid #CCC; position:absolute;}

</style>

<script src="http://jhi.me/source/global.js"></script>

</head>



<body>

<script>

function initAll(){

	var lis = document.getElementById("ul").getElementsByTagName("li");

	for(var i = 0; i < lis.length; i++){

		addClass(lis[i],"li" + (i + 1))

	}

}

function initNav(){

	var wrap = document.getElementById("wrap");

	var nav = document.getElementById("nav");

	nav.style.top = "365px";

	nav.style.left = "-100px";

	window.onscroll = function(){

		//alert("100+");

	}

	//alert("test");

}

addLoadEvent(initAll);

addLoadEvent(initNav);

</script>

<div id="wrap">

	<ul id="ul">

		<li>1</li>

		<li>2</li>

		<li>3</li>

		<li>4</li>

		<li>5</li>

	</ul>

	<ul id="nav">

		<li>A</li>

		<li>B</li>

		<li>C</li>

		<li>D</li>

		<li>E</li>

	</ul>

</div>



</body>

</html>

------解决方案--------------------

<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>固定悬浮垂直导航 - 联系</title>

<style>

body { margin:0;}

ul,li { display:block; margin:0; padding:0; list-style-type:none;}

#wrap { width:950px; margin:0 auto; position:relative;}

ul#ul li { height:255px; font-size:100px; text-align:center; line-height:200px; color:white;}

ul#ul li.li1 { background:black;}

ul#ul li.li2 { background:green;}

ul#ul li.li3 { background:blue;}

ul#ul li.li4 { background:red;}

ul#ul li.li5 { background:yellow;} 

 

ul#nav { width:100px; background:purple; color:#AAA; border0:1px solid #CCC; position:absolute;}

</style>

<script src="http://jhi.me/source/global.js"></script>

</head>

 

<body>

<script>

function initAll(){

    var lis = document.getElementById("ul").getElementsByTagName("li");

    for(var i = 0; i < lis.length; i

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

想做个随荧幕滚动儿滚动的垂直导航

相关资料更多>

推荐阅读更多>