<!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开发基础知识--碎片24

    1:兼容字体大小6plue跟它以下的区别 #define FONT_COMPATIBLE_SCREEN_OFFSET(_fontSize_) [UIFont systemFontOfSize:(_fo ...

  2. Android触摸事件流程剖析

    Android中的触摸事件流程就是指MotionEvent如何传递,主要包括两个阶段: onInterceptTouchEvent触摸事件拦截方法传递,从外到里传递 onTouchEvent触摸事件处 ...

  3. margin css的外边距

    h2{margin:10px 0;} div{margin:20px 0;} ...... <h2>这是一个标题</h2> <div> <h2>这是又一 ...

  4. 你买了多少ERP？

    企业使用ERP(或是其他管理系统),有三种模式:自开发.采购.租赁(SAAS).不知道企业的各级管理者们,是否想过这个问题——我们到底买(做.租)了多少“量”的ERP呢? 这个问题也许不是那么好回答. ...

  5. Linux服务器宕机案例一则

    案例环境 操作系统 :Oracle Linux Server release 5.7 64bit 虚拟机 硬件配置 : 物理机型号为DELL R720 资源配置 :RAM 8G Intel(R) Xe ...

  6. js中操作数组的一些方法

    增 push   在数组的末尾添加一个或多个元素,并返回新的长度.  array.push(1,2,3.........) unshift  在数组的开头添加一个或多个元素,并返回新的长度. arra ...

  7. Spring事务管理的三种方式

    一 .第一种:全注解声明式事务 Xml代码 复制代码 收藏代码 .<?xml version="1.0" encoding="UTF-8"?> .& ...

  8. 看 nova-scheduler 如何选择计算节点 - 每天5分钟玩转 OpenStack（27）

    本节重点介绍 nova-scheduler 的调度机制和实现方法:即解决如何选择在哪个计算节点上启动 instance 的问题. 创建 Instance 时,用户会提出资源需求,例如 CPU.内存.磁 ...

  9. [python]爬虫学习（一）

    要学习Python爬虫,我们要学习的共有以下几点(python2): Python基础知识 Python中urllib和urllib2库的用法 Python正则表达式 Python爬虫框架Scrapy ...

  10. 记SQL SERVER一次诡异的优化

    最近做的项目快上线了,在做了一次压力测试后发现了不少问题,基本都是因为数据量达到一定级别时(预测系统上线10年后的数据量)SQL查询超时,其中有些是因为索引缺失.有些是因为写法不好,这些在有经验的人眼 ...