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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
canvas绘制环形进度条
Feb 23 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
vue router 组件的高级应用实例代码
Apr 08 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
基于mysql的论坛(1)
2006/10/09 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
可实现多表单提交的javascript函数
2007/08/01 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
致400米运动员广播稿
2014/02/07 职场文书
英语教研活动总结
2014/07/02 职场文书
作风转变心得体会
2014/09/02 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
高中政治教师教学反思
2016/02/23 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
七年级作文之冬景
2019/11/07 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers