基于jQuery的楼层案例
~(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的楼层案例的更多相关文章
- Web 开发人员不能错过的 jQuery 教程和案例
jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...
- 基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
- 基于jquery判断浏览器版本过低代码
基于jquery判断浏览器版本过低代码.这是一款对不支持HTML5跟CSS3代码的浏览器提示用户更换特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div sty ...
- 基于jQuery点击圆形边框弹出图片信息
分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=&q ...
- 基于jquery 移动插件的实现
引用谢灿勇 地址 http://www.cnblogs.com/st-leslie/p/6002148.html 一个思路分析:大致上实现的思路有以下两种. 一.判断块是否被按下(mousedown ...
- 基于JQuery可拖动列表格插件DataTables的踩坑记
前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...
- 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...
- 基于JQuery的获取鼠标进入和离开容器方向的实现
做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCT ...
随机推荐
- typedef 与 set_new_handler的几种写法
可以用Command模式.函数对象来代替函数指针,获得以下的好处: 1. 可以封装数据 2. 可以通过虚拟成员获得函数的多态性 3. 可以处理类层次结果,将Command与Prototype模式相结合 ...
- Equals和==比較
总结一下: 对于字符串来说.两个比較的都是对象的值,而且是等效的,这是由于MS重写了==运算符和Equals方法所致 对于非字符串的其它引用类型(非匿名类型)两个比較的都是对象 ...
- 自己主动化脚本ssh以及telnet发送命令并退出(windows和linux都适用)
须要安装putty,用到的命令是plink: PuTTY Link: command-line connection utility Unidentified build, Jun 23 2015 1 ...
- IOS-7-纪念一下刚刚接到的第一份offer(下面是面试遇到的问题)
1.多线程技术 有四种开启线程的方式,基本的为:NSThread.NSOperation.GCD:还有一种已经老掉牙了.基于C语言.就不写了,基本不用. 样例:家在网络图片显示在手机界面上 第一步:代 ...
- smarty课程---smarty的处理过程是怎样的
smarty课程---smarty的处理过程是怎样的 一.总结 一句话总结:编译文件里时间戳记录模板文件修改时间,如果模板被修改过就可以检测到,然后重新编译 1. smarty将php源文件,首先编译 ...
- datatable设置成中文
$('#datatable').DataTable({ language: { "sProcessing": "处理中...", "sLengthMe ...
- Object和其他类型的转换
Object对象是一切类的父类(基类),只要是Object对象,可以强制转换为其他类型.
- ES6学习笔记(一)新的变量定义命令let和const
1.一些历史 ES6(ECMAScript 6.0)是 JavaScript 语言的新一代标准,于2015 年 6 月正式发布,距今已经4年了,它的目标,是使得 JavaScript 语言可以用来编写 ...
- vue踩坑-Error: listen EADDRNOTAVAIL 192.168.1.122:8081
每天上班,重启电脑,按照下面的步骤,打开vue的项目,开始编写代码,但是,今天一如往常一般操作:1:cd /项目名称 下面就是运行项目了,cd /项目名称,我的文件放在D盘,所以先进入d盘,再进入项目 ...
- UVALive 6867 Plane Ticket Pricing
Plane Ticket Pricing Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu ...