原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）、offsetTop、滚动监听的妙用）
想实现窗口滚动到一定位置时，部分网页的页面发生一些变化，但是手头没有合适的插件，所以就想到自己编写一个简易的方法，
想到这个方法要有很高的自由度和适应性，在这，就尽量的削减其功能，若有错误的地方或者更好的建议，请大家评论，一同探讨，
好了废话不多说，下面开始干活了！
首先，说一下我想实现的基本功能：
此方法需要有2个基本形参，，一个是我要监测的标签a，另一个是我要监测标签相对于哪个标签b做的距离检测。
当a和b的距离达到一定范围的时候，让网页局部发生一些变化效果，这是我们的预期。
以下是我的方法的框架：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
margin-top: 20px;
}
#a1{
background-color: red;
}
#a2{
background-color: blue;
}
#a2 .a22{
width: 50px;
height: 50px;
background-color: navajowhite;
position: relative;
top: 50px;
left: -50px;
}
#a3{
background-color: yellow;
}
</style>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<div id="a1"></div>
<div id="a2">
<div class="a22">haha</div>
</div>
<div id="a3"></div>
<div id="a3"></div>
</body>
<script language="JavaScript" src="js/jquery-1.10.2.min.js"></script>
<script language="JavaScript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
/*以下是我们以监测目标元素距离body顶部距离的方法*/
function myScrollFn($myElement1,$myElement2){
$(window).scroll(function(){ //这是scroll方法，窗口滚动时就会被调用
var a=$myElement1.scrollTop(); //这是监测滚动条距离顶端的距离
var b=$myElement2.offset().top; //这是监测我们目标元素距离body或者其第一个定位父元素顶端的距离
/*当div #a2距离窗口顶部距离在0px到200像素时，div .a22出现*/
if (b-a<=0&&b-a>=-200) {
$(".a22").css({"left":"20px","transition":"all 1s"});
}else{
$(".a22").css({"left":"-50px","transition":"all 0s"});
}
console.log(b-a); //为便于观察，在控制台打印出距离来
});
}
myScrollFn($("body"),$("#a2"));
</script>
</html>
上述代码功能：当窗口上沿在达蓝色div内部时，小div从左侧出现，不在时恢复原状。
这里先普及一下基础知识，
.scrollTop(); 是监测滚动条距离顶端的距离的，这是JQuery方法
.offset().top 是监测我们目标元素距离body或者其第一个定位父元素顶端的距离这也是JQuery方法及属性
同样在HTML5中、js中也都有这些属性方法的定义和详解，有兴趣的可以去查看帮助文档。
那按照以上结构就可以比较轻松的实现检测距离实现一定动画效果，只需要在if判断书写你想要变化的代码即可，如果想实现
每次到达设定区间都执行动画，可以像例子中一般，在else中设置重置我们的修改的样式即可。
写到这的时候，突然想到，我们网页中常用的那些，网页滚动产生的视觉差效果，他是不是也可以用这个来做一个方法呢！
下面请看这个简易的demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
position: relative;
height: 3000px;
padding-top: 400px;
background-color: gainsboro;
}
.a1{
width: 300px;
height: 300px;
background-image: url(img/FqYgq95pkXU2iGax9iYPaxRnt1Xl.png);
background-size: 100%;
position: absolute;
}
.a2{
width: 200px;
height: 100px;
background-color: yellow;
position: absolute;
margin-left: 50px;
}
</style>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="a1"></div>
<div class="a2"></div>
</div>
</body>
<script language="JavaScript" src="js/jquery-1.10.2.min.js"></script>
<script language="JavaScript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
/*编写一个简单的方法,实现网页常见常见的视觉差效果*/
function myEye($myElement1,$myElement2){
var num=1;
$(window).scroll(function(){
var a=$("body").scrollTop(); //取出滚动条离窗口顶端的距离
var yellow=$myElement2.offset().top; //取出黄色div块离body最上方的距离
var c=yellow-a+0.5; //计算出比滚动条滚动速度慢一倍的数值
$myElement1.css({"top":+c+"px"}); //设置黄色div的慢一倍的移动速度，产生视觉差效果
})
}
myEye($(".a1"),$(".a2"));
</script>
</html>
两个参数，可以设置成需要产生视觉差的2个元素节点，当然这里做的是demo，多加一些形参也都是可以的，看具体的网页需求了。
注意这里做实参的元素节点都是通过绝对定位实现的。通过 c=yellow-a+0.5;$myElement1.css({"top":+c+"px"}); 这两句代码
可以实现2个块滚动速度差一倍，如果要改变相差的速度，只需要修改 c=yellow-a+0.5;这个式子就可以了，这个浏览器滚动条的精度，
我们暂且以1px来算（这个不同设备好像是不同的，博主不是很了解），但是以1像素来计算，通过加减0-1之间的数值，可以实现任意
速度比的视觉差，按照这个结构，修改起来还是很容易的。
以上内容纯属博主无聊，一个人乱搞的产物，如果有bug，希望导游们能够指出，我们共同探讨。个人感觉还是蛮实用的，比直接应
用插件灵活性高，代码量也少很多。
原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）、offsetTop、滚动监听的妙用）的更多相关文章
- JavaScript之事件委托（附原生js和jQuery代码）
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
- window.parent.document解决原生js或jQuery 实现父窗口的问题
做WEB前端开发的过程中,经常会有这样的需求,用户点击[编辑]按钮,弹出一个对话框,在里边修改相应的值,然后把修改后的值显示在原页面,最后点击保存. 用window.parent.document.g ...
- Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释
前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...
- 【JS】怎样用原生JS实现jQuery的ready方法
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- onload事件与ready事件的区别，原生js与jquery的区别
onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...
- 原生js仿jquery一些常用方法
原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原 ...
随机推荐
- Java 字符流操作
上篇文章Java 字节流操作介绍了java中基本的字节流操作,但是我们常常对于字符操作,如果使用字节流来实现输入输出就显得麻烦,我们可以使用字符流来实现对我们看得见的字符char进行操作,主要内容如下 ...
- (27)IO流小结
字节流 输入字节流: ---------| InputStream 所有输入字节流的基类. 抽象类 ------------| FileInputStream 读取文件的输入字节流 --------- ...
- 开启Tomcat远程调试（转）
原文链接:http://www.07net01.com/2016/11/1721293.html 如何远程调试tomcat 一,linux环境下 1. 服防火墙打开8000端口,允许外网访问:2. 修 ...
- webkit图片滤镜
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- require.js 源码解读——配置默认上下文
首先,我们先来简单说一下,require.js的原理: 1.载入模块 2.通过模块名解析出模块信息,以及计算出URL 3.通过创建SCRIPT的形式把模块加载到页面中. 4.判断被加载的脚本,如 ...
- 模拟jquery链式访问
一直写代码写代码,博客都快荒废了,眼看一月要过完,不能不留下点记忆,嘿嘿,刚研究了下jquery的链式访问,这么好用的技能我赶紧get了下,研究后略微修改,模拟一个简单的链式访问,下面这段代码支持修改 ...
- iframe 自适应内容高度
在使用iframe的时候,会出现iframe不能随着内容的高度自动改变的情况,下面就介绍一种可以自适应高度的办法.<br/> <pre> <iframe id=" ...
- Linux 上做免密码登陆
基于密钥验证1.生成一对密钥ssh-keygen -t {rsa|dsa} -f /path/to/keyfile -N 'password'2.将公钥传输至服务器某用户的家目录的.ssh/autho ...
- 重温Javascript（四）-函数
函数 函数声明提升,在执行代码之前会先读取函数声明 sayHi(); function sayHi(){ alert("Hi!"); } 递归 arguments.callee是指 ...
- 【webpack学习笔记(一)】流行的前端模块化工具webpack初探
从开发文件到生产文件 有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...