<!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. SharePoint 2013 自定义扩展菜单

    在对SharePoint进行开发或者功能扩展的时候,经常需要对一些默认的菜单进行扩展,以使我们开发的东西更适合SharePoint本身的样式.SharePoint的各种功能菜单,像网站设置.Ribbo ...

  2. React Native常用组件Image使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. android studio 和idea 导入library工程

    idea 导入library方法 把工程Import成module后,具体的操作看图: 同样的,打开Project structure,点开你要作为library的module,然后点击android ...

  4. OOP感悟

    行内讲的最多的就是出来一年内基本靠copy,一年后才基本懂得如何去写代码,而理解领悟oop,需要的时间却不定. 我工作中,我发现很多人拿着面向对相当的语言作者做着面向过程的事情,不需要知其所以然,只要 ...

  5. iOS 疑难杂症 — — UIButton 点击卡顿/延迟

    前言 一开始还以为代码写的有问题,点击事件里面有比较耗时卡主线程的代码,逐一删减代码发现并不是这么回事. 声明  欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.c ...

  6. 查看mysql数据库版本方法总结

    当你接手某个mysql数据库管理时,首先你需要查看维护的mysql数据库版本:当开发人员问你mysql数据库版本时,而恰好你又遗忘了,那么此时也需要去查看mysql数据库的版本............ ...

  7. ORACLE清理、截断监听日志文件（listener.log）

    在ORACLE数据库中,如果不对监听日志文件(listener.log)进行截断,那么监听日志文件(listener.log)会变得越来越大,想必不少人听说过关于"LISTENER.LOG日 ...

  8. SQL SERVER 2012链接到SQL SERVER 2000的问题解决案例

    前几天在在桦仔的SQLSERVER走起微信公众帐号看到一篇文章MS SQL Server2014链接MS SQL Server 2000,当时手机上囫囵吞枣看了个大概,知道是由于SQL SERVER ...

  9. The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path解决方案

    0.环境: win7系统,Tomcat9配置无误. 1.错误: 项目中某一.jps页面忽然出现错误,鼠标点上去为:The superclass "javax.servlet.http.Htt ...

  10. SQL Server中截取字符串常用函数

    SQL Server 中截取字符串常用的函数: .LEFT ( character_expression , integer_expression ) 函数说明:LEFT ( '源字符串' , '要截 ...