<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
header,footer{background:skyblue;height:300px;}
div:nth-child(2){background:yellowgreen;height:500px;}
div:nth-child(3){background:cyan;height:500px;}
div:nth-child(4){background:darkcyan;height:500px;}
div:nth-child(5){background:salmon;height:500px;}
div:nth-child(6){background:wheat;height:500px;}
.tip{
position:fixed;
right:5px;
bottom:5px;
display:none;
}
.tip li{
list-style:none;
width:50px;
height:49px;
border-top:1px solid gray;
text-align:center;
line-height:49px;
background:olivedrab;
color:white;
cursor:pointer;
}
.selected{background:gold !important;}


</style>
</head>

<body>
<header>顶层</header>
<div class="lc">第一层：服装</div>
<div class="lc">第二层：电器</div>
<div class="lc">第三层：化妆品</div>
<div class="lc">第四层：珠宝</div>
<div class="lc">第五层：书籍</div>
<footer>底部</footer>
<div class="tip">
<ul><li>Top</li></ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul><li>Top</li></ul>
</div>
</body>

</html>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script>
//绑定楼层与按钮的关系
function Floor(lc,tip){
this.lc = lc;
this.tip = tip;
this.tipUlli = tip.find("ul>li");
this.tipOlli = tip.find("Ol>li");
}
//页面初始化
Floor.prototype.init = function(){
var that = this;
//每个楼层距离顶部的间距
this.arr = this.lc.map(function(ind,elem){
return $(elem).offset().top;
});
var len = this.arr.length;
this.arr.push(this.lc.eq(len-1).height()+this.arr[len-1]);
//给tip中的li绑定事件
//返回顶部
this.tipUlli.click(function(){
$("html,body").animate({"scrollTop":0})
});
//点击Ol中的li
this.tipOlli.click(function(){
$("html,body").animate({"scrollTop":that.arr[ind]});
});
//当滚动条滚动时发生的变化
$(window).scroll(function(){
var st = $(window).srollTop();
var h = $(window).height/2;
//显示
if(st > h){
that.tip.fadeIn();
}else{
that.tip.fadeOut();
}
//判断可视区域显示哪一个楼层
var i=0,a =that.arr,len=a.length-1,ind=-1;
for( ; i<l;i++){
var min = a[i];
var max = a[i+1];
if(min < st+h && st+h < max){
ind=i;
}
}
that.tipOlli.removeClass("selected");
if(ind>-1){
that.tipOlli.eq(ind).addClass("selected");
}
});
}
var f = new Floor($(".lc"),$(".tip"));






</script>

JQ编写楼层效果的更多相关文章

  1. jq实现楼层切换效果

    <!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; box-sizing: ...

  2. js实现楼层效果

    今天自己写个楼层效果,有一点烦躁,小地方犯错误.各位大神来修改不足啊!!! <!DOCTYPE html><html lang="en"><head& ...

  3. JQ实现弹幕效果

    JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...

  4. 微信小程序之楼层效果

    今天做了一个小程序实现一个楼层效果  带大家分享下经验和api的使用吧 如图 将左边和右边各分了一个组件  目录如下 其中list页面是这个楼层效果的页面 components是组成这个页面的两个组件 ...

  5. 修改css样式+jq中的效果+属性操作+元素操作

    :checked    选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color ');   //300px 2.参数是属性名,属性值,逗号分隔,是 ...

  6. 今天讲的是JQ 的动画效果

    老规矩,先贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  7. vue实现京东动态楼层效果

    页面效果如下 <template> <div> <h1>首页</h1> <section class="floor-nav" ...

  8. jq菜单折叠效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. [锋利的JQ]-超链接提示效果

    关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...

随机推荐

  1. 【JavaScript】设计模式-module模式及其改进

    写在前面 编写易于维护的代码,其中最重要的方面就是能够找到代码中重复出现的主题并优化他们,这也是设计模式最有价值的地方 说到这里...... <head first设计模式>里有一篇文章, ...

  2. C++代码使用 CppUnit 进行单元检测

    CppUnit是一个很方便的对C++代码进行单元检测的工具. 如何编译CppUnit参照博客:http://blog.csdn.net/x_iya/article/details/8433716 该博 ...

  3. AES加密解密——AES在JavaWeb项目中前台JS加密，后台Java解密的使用

    一:前言 在软件开发中,经常要对数据进行传输,数据在传输的过程中可能被拦截,被监听,所以在传输数据的时候使用数据的原始内容进行传输的话,安全隐患是非常大的.因此就要对需要传输的数据进行在客户端进行加密 ...

  4. C#设计模式之五创建者模式（Builder）【创建型】

    一.引言  今天我们要讲讲Builder模式,也就是建造者模式,当然也有叫生成器模式的.在现实生活中,我们经常会遇到一些构成比较复杂的物品,比如:电脑,它就是一个复杂的物品,它主要是由CPU.主板.硬 ...

  5. tomcat manager 的用户权限配置，及环境变量CATALINA_HOME的错位问题

    因为tomcat的manager是管理其他项目的发布.删除等操作的管理项目,所以需要为其设置登陆用户和密码,以及用户相应的访问权限,配置如下: tomcat-users.xml需要添加如下内容: &l ...

  6. HDFS概述（5）————HDFS HA

    HA With QJM 目标 本指南概述了HDFS高可用性(HA)功能以及如何使用Quorum Journal Manager(QJM)功能配置和管理HA HDFS集群. 本文档假设读者对HDFS集群 ...

  7. Javascript写的一个可拖拽排序的列表

    自己常试写了一个可拖拽进行自定义排序的列表,可能写的不太好,欢迎提供意见. 我的思路是将列表中的所有项都放进一个包裹层,将该包裹层设为相对定位,每当点击一个项时,将该项脱离文档并克隆一份重新添加到文档 ...

  8. 移动WEB 响应式设计 @media总结

    第一种: 在引用样式的时候添加 <link rel="stylesheet" media="mediatype and|not|only (media featur ...

  9. Canal 同步异常分析：Could not find first log file name in binary log index file

    文章首发于[博客园-陈树义],点击跳转到原文Canal同步异常分析:Could not find first log file name in binary log index file. 公司搜索相 ...

  10. IOC模式理解

    理解IOC inversion of control  控制反转  与  DI   Dependency Injection  依赖注入概念之前,我们需要知道在一个系统的设计过程中,降低各模块之间的相 ...