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 相关文章推荐
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
javascript折半查找详解
Jan 26 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
webstorm+vue初始化项目的方法
Oct 18 Javascript
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代码中的注释方法
2016/11/03 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
Jquery 的扩展方法总结
2011/10/01 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
播音主持专业个人自我评价
2014/01/09 职场文书
校园活动宣传方案
2014/03/28 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
老兵退伍标语
2014/10/07 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
党员争先创优承诺书
2015/01/20 职场文书
承诺书范本大全
2015/05/04 职场文书
运动会宣传稿100字
2015/07/23 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫