鼠标滚动到网页某处时出发动画

function became(e,b) {

//e--块级元素的class或id,b--所需要执行的动画class;

var divTop = $(e).offset().top;

var bodyScroll= $("body").scrollTop();

var winHeight = $(window).height();

if(bodyScroll + winHeight > divTop - 100) {
if(bodyScroll + winHeight < divTop + winHeight) {
$(e).addClass(b);

} else {
$(e).removeClass(b);
}

} else {
$(e).removeClass(b);
}

}

对于这  我感到很心酸,最早的时候  一直在那bodyScroll + winHeight == divTop - 100时出发效果 ,结果if整个进不去,最后 查了好久,才知道了浏览器精确不到==的程度,好心酸。不过最终还是给写出来,开森。。

时间: 2024-11-06 01:27:50

鼠标滚动到网页某处时出发动画的相关文章

用AutoHotKey彻底解决“Ctrl键+鼠标滚动”时的缩放问题

“Ctrl键+鼠标滚动”会造成代码编辑窗口的字体缩放,这是自Visual Studio 2010以来引入的一个新特性,也是一个恼人的问题,详见VS2010中尴尬的代码窗口缩放功能. 于是,每次安装Visual Studio,首先安装的插件就是 Disable Mouse Wheel Zoom ,禁用这个特性. 但是,最近在用Visual Studio 2015 Preview,这个插件还不支持VS 2015,不得不饱受这个问题的折磨.今天(12月10日)实在忍无可忍,下定决心解决这个问题. 后来

非激活窗口中响应鼠标滚动之理论篇

在最近工作中有一个优化交互的需求,分析后得知,其核心功能为能在非激活窗口中响应鼠标滚动消息,先就该需求进行前期方案验证. 同类产品实现 参照现有软件行为,操作系统为Win7.以notepad++,Chrome两款软件为例. 当鼠标选中notepad++后,然后将鼠标转移到Chrome界面后,上下滚动鼠标,Chrome页面能够同步滚动. 当鼠标选中Chrome后,然后将鼠标转移到Notepad++界面,上下滚动,Notepad++不能同步滚动. 猜测是Chrome对滚轮滚动消息进行了额外处理.既然

15款fullpage.js鼠标滚动页面动画展示特效

jquery全屏鼠标滚动切换fullpage页面模板下载 html5响应式页面滚动背景图片动画特效 酷炫html5 css3全屏滚动动画专题模板 html5腾讯互动娱乐网站鼠标滚动展示模板 html5平安儿童手表页面滚动简约单页模板 html5叮咚手机app下载页面滚动展示特效 jquery fullPage证券股票软件页面滚屏动画特效 jquery.fullpage.js360安全路由全屏页面滚动效果 html5新年快乐医院专题页介绍模板下载 html5雷锋wifi软件介绍页面下滑滚动式特效

理解鼠标滚动事件

javascript<script> window.onload = function(){ var count = 0; document.onmousewheel = function(e){ /*鼠标滚动的量 下滚是负 上滚是正*/ if(e.wheelDelta < 0){ count ++; }else{ count --; } console.log(count); } }</script>``` #### 第二步 了解 fullpage jquery插件 >

jQuery背景跟随鼠标移动的网页导航

首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search 首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 滚动图片 广告特效 选项卡特效 鼠标特效 表单按钮 表格图层 窗口特效 文字特效 色彩特效 图像特效 日期特效 导航菜单 在线客服 当前位置:模板网首页 > 特效插件 > 导航菜单 >  jQuery背景跟随鼠标移正文 jQuery背景跟

基于jquery的鼠标滚动放大缩小图片

一直以来都想写一个图片放大和缩小的小玩意,本来以为会很复杂,这几天自己思考了一下,原来是so easy啊.目前实现的放大缩小,主要时依据鼠标的滚轮触发事件来实现的,废话少说直接上源码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

flowLayoutPanel1设置内容随着鼠标滚动而滚动

当flowLayoutPanel1内容过多时,可以设置竖条,当时当鼠标滚动时,里面的内容不会随着鼠标的滚动而滚动,这就要求我们自己写事件了: 宗旨:判断鼠标是不是在flowLayoutPanel1区域内,如果在,设置flowLayoutPanel1的垂直滚动距离 给winform窗体加一个mousewheel监听事件 核心代码: private void Form1_MouseWheel(object sender, MouseEventArgs e) { //e.X e.Y以窗体左上角为原点,

添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常

这两天想在网页中添加一个添加浮动按钮,点击该按钮滚动则到网页底部.在网上bing搜索了一下,大多是JQuery的. 我想要纯JavaScript的,只好DIY了.在IE9.11,Maxthon 1.6.7,Firefox30.31,360极速浏览器7.5.3.308下测试正常. 其中难点在于,setScrollBottom这个函数. 按常规写法: function setScrollBottom(value) { if (document.documentElement.scrollTop){

BEX5下实现鼠标滚动滚动条

使用前提: 页面内容过多,默认的滚动条太难看,在不引入滚动条插件情况下让界面不使用滚动条,又能通过鼠标滚动 实现步骤: 1 在会出现滚动条的组件上设置隐藏滚动条 overflow:hidden; 2  在上述组件的bind-mouseenter(鼠标进入事件)增加滚动监听器 var num = 0; var i = true; Model.prototype.buttonGroup1Mouseenter = function(event){ var me = this; this.getElem