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实现键盘方向键翻页功能的代码
Jun 03 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
JS根据生日算年龄的方法
May 05 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
利用JS判断元素是否为数组的方法示例
Jan 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
建立文件交换功能的脚本(三)
2006/10/09 PHP
URL Rewrite的设置方法
2007/01/02 PHP
php getsiteurl()函数
2009/09/05 PHP
php生成xml简单实例代码
2009/12/16 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
优秀学生自我鉴定范例
2013/12/18 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android
浅谈Redis的事件驱动模型
2022/05/30 Redis