您的位置：首页 > Web前端 > JQuery

jquery特效-全屏楼梯式滚动

2016-06-29 13:35 543 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> 全屏楼梯式滚动特效-小猪 </title>

<meta name="Generator" content="EditPlus">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<style type="text/css">

*{margin:0px; padding:0px;}

body{background:url('img/bg.jpg')}

.nav{width:164px; position:fixed; top:200px; left:50px;}

.nav img:hover{cursor:pointer;}

.nav ul.navCon{width:110px; height:190px; background:#943ec9; margin:0 auto; display:none;}

.nav ul li{width:100%; height:35px; list-style-type:none; color:#ddd; font-size:14px; font-family:"微软雅黑"; text-align:center; line-height:35px; cursor:pointer; background:url('img/bg1.png') no-repeat bottom;}

.nav ul li:hover{color:#fff;}

.con{width:100%; height:100%; position:fixed; left:0px; top:0px; z-index:-1;}

.con ul{width:100%; height:100%;}

.con ul li{width:100%; height:100%;}

</style>

</head>

<body>



<div class="nav">

<img src="img/index.png" />

<ul class="navCon">

<li>意时网</li>

<li>谋福利</li>

<li>免费保险</li>

<li>手机应用</li>

<li>意时广告</li>

</ul>

</div>





<div class="con">

<ul>

<li style="background:url('img/guangGao.png') no-repeat center;"></li>

<li style="background:url('img/MAP.png') no-repeat center;"></li>

<li style="background:url('img/pic_about.png') no-repeat center;"></li>

<li style="background:url('img/pic_culture.png') no-repeat center;"></li>

<li style="background:url('img/pic_joinus.png') no-repeat center;"></li>

</ul>

</div>





<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

//点击飞艇图片时触发

$(".nav img").click(function(e){

$(".nav ul.navCon").slideToggle("slow");

e.stopPropagation();

});

//点击屏幕其他地方时触发

$(window).click(function(){

$(".nav ul.navCon").slideToggle("slow");

});

//点击导航栏的菜单时触发

$(".nav ul li").click(function(){

//获取点击的ul下的li的索引值

var index = $(this).index();

//alert(index);

//获取浏览器的高度

var height = $(window).height();

//alert(height);

//点击导航栏中的ul下的li时，切换到对应的图片

$(".con").animate({"top" : -height*index}, 500);

});

</script>

</body>

</html>

效果图如下(当鼠标点击飞艇时显示导航条菜单信息)：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航