~(function() {
var flag = true; //点击切换效果
$(".oDR7_asideItem:not(:first)").click(function() {
flag = false;
//alert($(".oRD8_stairs").length);
$(".oDR7_asideItem").removeClass("oDR7_active").find("span").removeClass("oDR7_activeDot").removeClass("oDR7_color");
$(this).addClass("oDR7_active").find("span:nth-of-type(2)").addClass("oDR7_activeDot").end().find("span:last-of-type").addClass("oDR7_color");
var sTop = $(".oRD8_stairs").eq($(this).index()-1).offset().top - 165;
$("body,html").animate({
"scrollTop": sTop
}, 1000, function() {
flag = true;
});
}); //滚动条滚动效果
$(window).scroll(function() {
if (flag) {
var sTop = $(document).scrollTop();
//alert($(".oRD8_stairs2").length);
var $floor = $(".oRD8_stairs2").filter(function(index, ele) {
return Math.abs($(this).offset().top - sTop) < $(this).height() / 2;
});
if($floor.index()-1 > 0) {
$(".oDR7_asideItem").removeClass("oDR7_active").find("span").removeClass("oDR7_activeDot").removeClass("oDR7_color");
$(".oRD7_stairs2List").eq($floor.index()-1).addClass("oDR7_active").find("span:nth-of-type(2)").addClass("oDR7_activeDot").end().find("span:last-of-type").addClass("oDR7_color");
}
}
}); //悬浮效果
$(".oDR7_asideItem:not(:first)").hover(function() {
$(".oDR7_asideItem").removeClass("oDR7_active").find("span").removeClass("oDR7_activeDot").removeClass("oDR7_color");
$(this).addClass("oDR7_active").find("span:nth-of-type(2)").addClass("oDR7_activeDot").end().find("span:last-of-type").addClass("oDR7_color");
},function() {});
})();

基于jQuery的楼层案例的更多相关文章

  1. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  2. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  3. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  4. 基于jquery判断浏览器版本过低代码

    基于jquery判断浏览器版本过低代码.这是一款对不支持HTML5跟CSS3代码的浏览器提示用户更换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div sty ...

  5. 基于jQuery点击圆形边框弹出图片信息

    分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=&q ...

  6. 基于jquery 移动插件的实现

    引用谢灿勇 地址  http://www.cnblogs.com/st-leslie/p/6002148.html 一个思路分析:大致上实现的思路有以下两种. 一.判断块是否被按下(mousedown ...

  7. 基于JQuery可拖动列表格插件DataTables的踩坑记

    前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...

  8. 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)

    在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...

  9. 基于JQuery的获取鼠标进入和离开容器方向的实现

    做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCT ...

随机推荐

  1. [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility

    In this lesson, you will learn how to use the SafeAreaView component to avoid the sensor cluster (th ...

  2. iOS xib View宽高不能改变

    IOS - xib(Interface Builder,view) - can't change view size(view不能改变大小问题) 今天在试着swift语言写个demo,,当中遇到了这个 ...

  3. Codeforces 528A Glass Carving STL模拟

    题目链接:点击打开链接 题意: 给定n*m的矩阵.k个操作 2种操作: 1.H x 横向在x位置切一刀 2.V y 竖直在y位置切一刀 每次操作后输出最大的矩阵面积 思路: 由于行列是不相干的,所以仅 ...

  4. 在SSM框架中我设置拦截器filter不能通过注解获取到实现类

    我在用注解注入实现类的时候,出现了这样的错误:如以下截图: 这个地方报出的错误是说明我的一个接口类型的类没有获取到,后来我就想要是我的实现类没有获取到那么我就直接new一个实现类然后再进行调用就会出现 ...

  5. android ViewPager实现 跑马灯切换图片+多种切换动画

    近期在弄个项目.要求有跑马灯效果的图片展示. 网上搜了一堆,都没有完美实现的算了还是自己写吧! 实现原理利用 ViewPager 控件,这个控件本身就支持滑动翻页非常好非常强大好多功能都能用上它.利用 ...

  6. P3908 异或之和

    题目描述 求1 \bigoplus 2 \bigoplus\cdots\bigoplus N1⨁2⨁⋯⨁N 的值. A \bigoplus BA⨁B 即AA , BB 按位异或. 输入输出格式 输入格 ...

  7. CetnOS6 网络配置,主机名配置

    CetnOS6 网络配置,主机名配置 一.通过命令ifconfig -a 查看可用网络设备 二.通过网络配置文件/etc/sysconfig/network-scripts/ifcfg-eth0 配置 ...

  8. POJ 3641 Pseudoprime numbers (miller-rabin 素数判定)

    模板题,直接用 /********************* Template ************************/ #include <set> #include < ...

  9. 昼猫笔记 JavaScript -- 作用域技巧!!

    简单理解 var zm = function (x) { var code = 'bb' return code }; 学过js的老哥们都知道,当这样简单的一个函数进入浏览器,浏览器开始解释代码,会将 ...

  10. 基于promise用于浏览器和node.js的http客户端的axios

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支 ...