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的ajax功能实现web service的json转化
Aug 29 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 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
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
smarty中post用法实例
2014/11/28 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
js取得url地址参数实例
2013/02/22 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python File readlines() 使用方法
2018/03/19 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
Python调用JavaScript代码的方法
2020/10/27 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
机电一体化应届生求职信
2014/08/09 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
珍爱生命主题班会
2015/08/13 职场文书
排查MySQL生产环境索引没有效果
2022/04/11 MySQL