<!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. SQL Queries from Transactional Plugin Pipeline

    Sometimes the LINQ, Query Expressions or Fetch just doesn't give you the ability to quickly query yo ...

  2. IOS 日期的简洁格式展示

    首先我要解释一下标题的意义,日期的简洁格式展示,之所以简介,是因为让人一目了然,不需要思考是什么时候. 在详细一点就是我们在微信朋友圈中 所看到的时间格式. 例如:刚刚 -几分钟前-几小时前等等. 今 ...

  3. swift实现饭否应用客户端源码

    swift 版 iOS 饭否客户端 源码下载:http://code.662p.com/view/13318.html 饭否是中国大陆地区第一家提供微博服务的网站,被称为中国版Twitter.用户可通 ...

  4. MySQL学习笔记之数据类型

    数据类型在所有的数据库使用当中,都是避免不了的部分.以前每次写SQL语句,对于定义成哪种数据类型总是迷迷糊糊,今天就来彻底弄清.以下介绍仅针对MySQL 5.5以上版本. 一.字符串类型 1.char ...

  5. 笔记整理之 Bulk Insert

    之前2篇日志整理了BCP大致的用法,这次整理一下它的兄弟 Bulk Insert 的写法以及和bcp那边的结合的用法. 首先,Bulk Insert 语句要在连接了Sql Server 服务器之后才执 ...

  6. Shelve Instance 操作详解 - 每天5分钟玩转 OpenStack（38）

    Instance 被 Suspend 后虽然处于 Shut Down 状态,但 Hypervisor 依然在宿主机上为其预留了资源,以便在以后能够成功 Resume. 如果希望释放这些预留资源,可以使 ...

  7. android android 判断是否滑动

    (转自:http://blog.csdn.net/angle_rupert/article/details/6255522) 声明: float x_temp01 = 0.0f; float y_te ...

  8. android Dialog实例

    Dialog类 public class DialogUtil { public static Dialog EditDialog(Activity context,View view){ final ...

  9. openwrt 安装 ser2net 配置

    //--- openwrt中的ipk应用 opkg install /tmp/ser2net_2.7-2_brcm63xx.ipk 看到安装成功的信息后启动ser2net Ser2net –c /et ...

  10. 漫谈c++11 Thread库之使写多线程程序

    c++11中最重要的特性之一就是对多线程的支持了,然而<c++ primer>5th却没有这部分内容的介绍,着实人有点遗憾.在网上了解到了一些关于thread库的内容.这是几个比较不错的学 ...