jQuery实现鼠标滚轮动态改变样式或效果


Posted in Javascript onJanuary 05, 2015

代码如下:

$(window).scroll(function() { 

            var scrolls = $(this).scrollTop();

            $(".context_block").each(function(){ //类名为“context_block”的块级元素

                var height = $(this).height();

                if($(this).position().top + height-60> scrolls){

                    var _index = $(".context_block").index($(this));

                    $(".menu  a").parent().siblings().contents("a").removeClass("hover_mobileLink");    

                    $($(".menu  a")[_index]).addClass("hover_mobileLink");//动态改变class为“menu” 的块级元素下的a标签的样式(添加或者删除某个类)

                    return false;

                }

            });

        });

核心代码很简单,实现的效果却非常不错,这里推荐给小伙伴们。

Javascript 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
jquery.cookie.js使用指南
Jan 05 #Javascript
在Google 地图上实现做的标记相连接
Jan 05 #Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 #Javascript
jQuery中attr()方法用法实例
Jan 05 #Javascript
jQuery实现自定义下拉列表
Jan 05 #Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 #Javascript
jQuery圆形统计图开发实例
Jan 04 #Javascript
You might like
PHP实现读取一个1G的文件大小
2013/08/24 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
两个php日期控制类实例
2014/12/09 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python的迭代器和生成器使用实例
2015/01/14 Python
Sanic框架路由用法实例分析
2018/07/16 Python
PyQt5组件读取参数的实例
2019/06/25 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
keras slice layer 层实现方式
2020/06/11 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
党校自我鉴定范文
2013/10/02 职场文书
八项规定整改方案
2014/02/21 职场文书
党员一帮一活动总结
2014/07/08 职场文书
2014年政协工作总结
2014/12/09 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
详解Go与PHP的语法对比
2021/05/29 PHP