<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>楼层滚动特效</title>
</head>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#F1{
width:100%;
height: 500px;
background-color: #00008B;
}
#F2{
width:100%;
height: 500px;
background-color: #00FF00;
}
#F3{
width:100%;
height: 500px;
background-color: #00FFFF;
}
#F4{
width:100%;
height: 500px;
background-color: #1AC78C;
}
#F5{
width:100%;
height: 500px;
background-color: #6495ED;
}
#ulbox{
position: fixed;
left:30px;
top:25%;
}
#ulbox li{
list-style: none;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #000;
background-color: #fff;
}
a{
display: block;
text-decoration: none;
cursor: pointer;
}
.current{
background-color: #FF0000;
}
</style>
<body>
<div id="content">
<div id="F1" class="item">
楼层一
</div>
<div id="F2" class="item">
楼层二
</div>
<div id="F3" class="item">
楼层三
</div>
<div id="F4" class="item">
楼层四
</div>
<div id="F5" class="item">
楼层五
</div>
</div>
<ul id='ulbox'>
<li><a href="#F1" class="current">F1</a></li>
<li><a href="#F2">F2</a></li>
<li><a href="#F3">F3</a></li>
<li><a href="#F4">F4</a></li>
<li><a href="#F5">F5</a></li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var top=$(document).scrollTop();
var ulbox=$('#ulbox');
var items=$('#content').find('.item');
var currentId='';//当前所在楼层的#id
items.each(function(){
var _this=$(this);
var itemstop=_this.offset().top;//遍历出每个楼层距离顶部的高度
if(top>itemstop-200){
currentId='#'+_this.attr('id');
}else{
return false;
}
})
var currentLink=ulbox.find('.current');
if(currentId&&currentLink.attr('href')!=currentId){
currentLink.removeClass('current');
ulbox.find('[href='+currentId+']').addClass('current');
}
});

});


</script>
</html>

jquery版楼层滚动特效的更多相关文章

  1. 用jquery实现楼层滚动对应导航高亮

    html 结构排版: // 定位到页面左侧或者右侧 <div class="nav">         <ul id="menu-list"& ...

  2. jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. [JQuery]ScrollMe滚动特效插件

    最近考完试,一切顺利,昨晚闲着无聊把最近要用的一个插件翻译了一下:ScrollMe. (╯‵□′)╯︵┻━┻地址请戳: /* ScrollMe -李明夕翻译(╯‵□′)╯︵┻━┻ */ ScrollM ...

  4. 一款非常炫酷的jQuery动态随机背景滚动特效

    一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...

  5. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  6. jQuery右侧悬浮楼层滚动 电梯菜单

    http://www.kaiu.net/effectCon.aspx?id=2198 <!doctype html> <html> <head> <meta ...

  7. jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)

    最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * ...

  8. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  9. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

随机推荐

  1. iOS 9 强制横屏

    首先在plist 文件中 Supported interface orientations 选项 只留下一个 portrait 屏幕强制横屏 使用以下代码 self.navigationControl ...

  2. iOS点击推送消息跳到应用指定页面

    现在的推送用的越来越频繁,几乎每个应用都开始用到了.其实又有几个用户会去看推送消息呢?没办法,产品经理最大啊,只是苦了我们这一帮程序员啊!闲话少说,进入正题.兄弟我用的是极光推送,自然是以极光推送为例 ...

  3. CSS background-color 、image 背景图片

    背景颜色 background-color 语法: background-color:<color> 默认值:transparent  透明 适用于:所有元素 继承性:无 动画性:是 计算 ...

  4. Play Framework 完整实现一个APP（十）

    1.定制Comment列表 新增加Comment list页面,执行命令行 > play crud:ov --template Comments/list 会生成/app/views/Comme ...

  5. yii2分页的基本使用及其配置详解

    作者:白狼 出处:http://www.manks.top/yii2_linkpager_pagination.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置 ...

  6. 迁移Reporting Services的方法与WMI错误

    今天上午,接到一个任务:迁移SQL SERVER 2005的报表服务到另外一台SQL SERVER 2008服务器,结果等我备份了两边服务器的ReportServer,ReportServerTemp ...

  7. 解决开启SQL Server sql Always on Group 事务日志增大的问题

    配置了Alwayson之后,因为没有只能使用完全恢复模式,不能使用简单或大容量日志模式,所以日志不断增长,不能使用改变恢复模式的方式清空日志 手动操作收缩或截断日志也无效 读了一些文章后发现,有人使用 ...

  8. 推荐一些python Beautiful Soup学习网址

    前言:这几天忙着写分析报告,实在没精力去研究django,虽然抽时间去看了几遍中文文档,还是等实际实践后写几篇操作文章吧! 正文:以下是本人前段时间学习bs4库找的一些网址,在学习的可以参考下,有点多 ...

  9. 导入项目时，有关[2016-04-03 20:38:02 - Dex Loader] Unable to execute dex: Multiple dex files 问题

    最近我在学习androidUI设计,在网上找了一个UI菜单界面开源代码示例,按照步骤导入项目,运行的时候控制台结果报了如下错误: [2016-04-03 20:38:02 - Dex Loader] ...

  10. Python学习day3作业

    days3作业 作业需求 HAproxy配置文件操作 根据用户输入,输出对应的backend下的server信息 可添加backend 和sever信息 可修改backend 和sever信息 可删除 ...