jQuery完成基于滚动条地点加载相应内容作用,jquery滚动条【奥门金沙手机娱乐网址】

在页面上看见过不菲的滚动作效果应,例如发展、下、左、右滚动。区别的制品使用分化的固守,明日介绍下jQuery无缝间歇向上滚动的不二诀要。十分的少说,干货拿起:

滚动条在web开辟中,很宽泛,原生的HTML滚动条很丢脸,由此不菲网站依靠JS来模拟完成滚动条效果;

jQuery完毕基于滚动条地点加载相应内容作用,jquery滚动条

兑现jQuery依照滚动条地点加载相应的情节:向下滚动时当内容区域滚动到可视窗口中度的八分之四时,加载动漫内容;向上滚动到相应的内容区域时也再也加载动漫内容!

奥门金沙手机娱乐网址,1.贯彻思路:

先静态结构好HTML结构,使用伪类:hover模拟动漫效果,再使用jQuery
调节动漫类名的切换到促功用益!首要决断滚动的倾向,以至对应方向上加载动画的时机(即哪天才加载动画的推断标准!关键点!)。

2.思维草稿图:

向下滚动加载动漫判别规范:(代码中addClass(卡塔尔(قطر‎函数)

奥门金沙手机娱乐网址 1

开荒进取滚动加载动漫决断规范:(代码中addClass2(卡塔尔函数)

奥门金沙手机娱乐网址 2

3.代码贯彻:

HTML:

<div class="header">
 实现思路:先布局好静态布局,再使用hover模拟动画行为,再改为类名on等用js进行控制!
 </div>
 <div class="banner">
 <h1>前端开发</h1>
 <p>
 Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,
 网页制作是Web1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以
 浏览为主。
 </p>
 </div>
 <div class="con">
 <div class="con_l"><img src="images/1.jpg" alt="奥门金沙手机娱乐网址 3" /></div>
 <div class="con_2"><img src="images/2.jpg" alt="奥门金沙手机娱乐网址 4" /></div>
 </div>
 <div class="news">news</div>
 <div class="footer">footer</div>

CSS:

*{margin:0px;padding:0px;}//粗暴地清除默认边距
body{
 font-family:"Arial Microsoft Yahei";
 font-size:16px;
 font-weight:bold;
}
.header{
 width:100%;height:500px;
 background-color: #10E668;
}
.banner{
 width:100%;height:600px;
 background:#F7CF3B;
 text-align: center;
 margin:30px auto;
 overflow: hidden;

}
.banner h1{
 font-size:30px;
 padding:50px 0;
 position:relative;
 top:400px;
 transition:all 0.3s 0.3s linear;
}
.banner p{
 font-size:18px;
 width:80%;
 margin:30px auto;
 line-height: 1.8em;
 text-align: left;
 text-indent:2em;
 position:relative;
 top:400px;
 transition:all 0.5s 0.5s linear;
}
//动画类
.banner.on h1,.banner.on p{
 top:0px;
}

.con{
 width:80%;height:720px;
 background:#508E5A;
 margin:20px auto;
 overflow: hidden;
}
.con img{
 width:400px;height:auto;
}
.con_l{
 float: left;
 position:relative;
 left:-400px;
 transition:all 0.3s 0.3s linear;
}
.con_2{
 float: right;
 position:relative;
 right:-400px;
 transition:all 0.3s 0.3s linear;
}
//动画类
.con.on .con_l{
 left:0;
}
.con.on .con_2{
 right:0;
}
.news{
 width:100%;height:600px;
 background:#CA3400;
}
.footer{
 width:100%;height:600px;
 background-color: #ccc;
}

jQuery:

$(function(){
 /*version 0.1.0 函数封装*/
 //向下滚动时
 function addClass(ele){
 var winH=$(window).height()*0.5;//可视窗口的高度的一半,更改0.5可以调整滚动到底部、中部、顶部时候开始加载
 var top=$(window).scrollTop();//可视窗口的滚动高度
 var ele_t=$(ele).offset().top;//内容区的top
 var ele_h=$(ele).height();//内容区的高

 //判断条件,看草稿图1!
 if(top<ele_t-winH){
 $(ele).removeClass('on');
 }else if((top>ele_t-winH)&&(top<ele_t+ele_h)){
 $(ele).addClass('on');
 }else{
 $(ele).removeClass('on');
 }
 }
 //向上滚动时,看草稿图2!
 function addClass2(ele){
 var winH=$(window).height()*0.5;//更改0.5可以调整滚动到底部、中部、顶部时候开始加载
 var top=$(window).scrollTop();//可视窗口的滚动高度
 var ele_t=$(ele).offset().top;//内容区的top
 var ele_h=$(ele).height();//内容区的高

 //判断条件
 if(top>ele_t+ele_h){
 $(ele).removeClass('on');
 }else if((top<ele_t+ele_h)&&(top>ele_t-winH*2)){
 $(ele).addClass('on');
 }else{
 $(ele).removeClass('on');
 }
 }
 //获取前一次的滚动高度(这里是第一次)
 var firstTop=$(window).scrollTop();

 $(window).scroll(function(){
 //每次滚动重新获取滚动高度
 var lastTop=$(this).scrollTop();
 //后一次滚动高度大于前一次滚动高,说明向下滚动,否则想上滚动!
 if(lastTop>firstTop){
 //加载对应的内容区域
 addClass('.banner');
 addClass('.con');
 }else{
 addClass2('.banner');
 addClass2('.con');
 }
 //每次都将后一次的滚动高度赋值给前一次的滚动高度
 firstTop=lastTop;
 });
});

4.总结:

这种作用用于模拟滚动加载动漫内容,重难题在于判断滚动的样子、相应滚动方向上加载动画时候的判定规范,认为逻辑依然有待进步的!

如上正是本文的全体内容,希望对大家的求学抱有利于,也指望我们多多照料帮客之家。

达成jQuery依据滚动条地点加载相应的剧情:向下滚动时当内容区域滚动到可视窗口…

首先看HTML代码,如下:

滚动条的贯彻原理其实比较轻便,拿垂直滚动条来讲:

.renav{width:200px;height:150px;line-height:21px;overflow:hidden;background:#FFFFFF;}.renavli{height:21px;}Web前端之家Web前端之家Web前端之家1Web前端之家2Web前端之家3Web前端之家4Web前端之家Web前端之家

1),最外层容器供给安装overflow:hidden,里层容器的惊人(滚动框)一亘高过最外层容器,就能够冒出侧边相对定位的滚动条,並且还要在外层容器下面监听鼠标滚轮事件,依据滚动的进度设置右边滚动条的top值;

下一场看下JS代码,如下:

jQuery完成基于滚动条地点加载相应内容作用,jquery滚动条【奥门金沙手机娱乐网址】。2),给左侧滚动条监听鼠标拖动事件,当拖动滚动条的时候,滚动框内的从头到尾的经过会发生相应的轮转,这里将须求测算出滚动框的滚动间隔;

${var$this=$;varscrollTimer;$this.hover{clearInterval;},function(){scrollTimer=setInterval{scrollNews.trigger;});functionscrollNews{var$self=obj.find;varlineHeight=$self.find.height();$self.animate({"margin-top":-lineHeight+"px"},600,function(){$self.css({"margin-top":"0px"}).find.appendTo}

3),滚动间距 = 滑块移动间隔 ÷ 窗口中度 x 页面长度;

笔者们新建三个文件,然后把代码复制进去即可了,别忘了调用下jQuery库文件。那Ritter别要重申的,列表的内容惊人要比大家外框架的冲天要高,不然会身不由己闪动的题目。

规律即便简单,但还需再补偿有些,由于鼠标的滚轮事件种种浏览器的宽容性存在难点,

在IE和Chrome下通过event.wheelDelta的重临值可知滚轮是升高滚的依然向下滚的

当重返值为正值的时候,表达是升高滚

当再次来到值是负值的时候,表达是向下滚

唯独event.wheelDelta在火狐下并不起成效,在火狐下供给经过event.detail来掌握滚轮是向上滚的依然向下滚,火狐下还会有好几不一样:

当再次来到值为正值的时候,表达是向下滚

当重临值是负值的时候,表达是发展滚

由此须要想方法做个门户大概;此处是用jQuery来落到实处滚动条效果,所以我们借用jQuery
Mousewheel那些插件来做合作;假设用原生JS来完毕的话,就需求做合营了,包容代码: