<!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. 最详细的hadoop2.2.0集群的HA高可靠的最简单配置

    简介 [from http://www.open-open.com/lib/view/open1390717631132.html] hadoop中的NameNode好比是人的心脏,非常重要,绝对不可 ...

  2. 极简MarkDown排版介绍（How to）

    如何切换编辑器 切换博客园编辑器为MarkDown:MarkDown Editor 选择一个在线编辑和预览站点:StackEdit 如何排版章节 MarkDown: 大标题 ========== 小标 ...

  3. centos7安装vncserver

    :# yum install tigervnc-server -y :cp /lib/systemd/system/vncserver@.service /etc/systemd/system/vnc ...

  4. Oracle监听服务启动失败案例

    在ORACLE测试服务器上还原恢复了一个数据库后,启动监听服务时出现了TNS-12541, TNS-12560,TNS-00511之类的错误,具体情况如下所示: [oracle@getlnx01 ad ...

  5. Linux系统查看系统是32位还是64位方法总结

    这篇博客是总结.归纳查看Linux系统是32位还是64位的一些方法,很多内容来自网上网友的博客.本篇只是整理.梳理这方面的知识,方便自己忘记的时候随时查看. 方法1:getconf LONG_BIT ...

  6. Reporting Service 服务启动时报错The service did not respond to the start or control request in a timely fashion

    案例环境: 启动一台数据库服务器(Windows Server 2003)的Reporting Service(SQL Server 2008 R2)服务时,出现如下错误信息: System.Inva ...

  7. typedef 和 #define 的区别

    本文已迁移至: http://www.danfengcao.info/c/c++/2014/02/25/difference-between-define-and-typedef.html typed ...

  8. composer "Illegal offset type in isset or empty"报错解决方案

    最近更新了composer版本,即执行以下任一命令 composer selfupdate | composer self-update 再次执行 composer update -vvv 会出现“I ...

  9. linux 安装jdk

    1.Linux安装JDK步骤1. 先从网上下载jdk(jdk-1_5_0_02-linux-i586.rpm) ,推荐SUN的官方网站www.sun.com,下载后放在/home目录中,当然其它地方也 ...

  10. 【转载】 Java线程面试题 Top 50

    Java线程面试题 Top 50 不管你是新程序员还是老手,你一定在面试中遇到过有关线程的问题.Java语言一个重要的特点就是内置了对并发的支持,让Java大受企业和程序员 的欢迎.大多数待遇丰厚的J ...