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 相关文章推荐
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
js异步编程小技巧详解
Aug 14 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
Javascript 继承机制实例
2009/08/12 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
Python转码问题的解决方法
2008/10/07 Python
python单链表实现代码实例
2013/11/21 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
社会实践自我鉴定
2013/11/07 职场文书
后勤岗位职责
2013/11/26 职场文书
计生个人工作总结
2015/02/28 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
小学毕业感言200字
2015/07/30 职场文书
学习十八大的感悟
2015/08/11 职场文书
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL