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开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
js运动事件函数详解
Oct 21 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
javascript实现倒计时效果
Feb 17 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
最新最全的手机号验证正则表达式
Feb 24 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设计模式之简单工厂模式详解
2014/09/04 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
Python 专题三 字符串的基础知识
2017/03/19 Python
windows系统下Python环境搭建教程
2017/03/28 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Python可以用来做什么
2020/11/23 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
关于Python错误重试方法总结
2021/01/03 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
《草原的早晨》教学反思
2014/04/08 职场文书
会计专业自荐信
2014/06/03 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
教师求职信怎么写
2015/03/20 职场文书
盗窃案辩护词
2015/05/21 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang