欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)根據(jù)滾動(dòng)條位置加載相應(yīng)內(nèi)容功能

 更新時(shí)間:2016年07月18日 14:29:52   作者:macanfa  
這篇文章主要實(shí)現(xiàn)了jQuery根據(jù)滾動(dòng)條位置加載相應(yīng)內(nèi)容的操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

實(shí)現(xiàn)jQuery根據(jù)滾動(dòng)條位置加載相應(yīng)的內(nèi)容:向下滾動(dòng)時(shí)當(dāng)內(nèi)容區(qū)域滾動(dòng)到可視窗口高度的一半時(shí),加載動(dòng)畫內(nèi)容;向上滾動(dòng)到相應(yīng)的內(nèi)容區(qū)域時(shí)也重新加載動(dòng)畫內(nèi)容!

1.實(shí)現(xiàn)思路:

先靜態(tài)布局好HTML結(jié)構(gòu),使用偽類:hover模擬動(dòng)畫效果,再使用jQuery 控制動(dòng)畫類名的切換來實(shí)現(xiàn)效果!主要判斷滾動(dòng)的方向,以及相應(yīng)方向上加載動(dòng)畫的時(shí)機(jī)(即何時(shí)才加載動(dòng)畫的判斷條件!關(guān)鍵點(diǎn)?。?/p>

2.思維草稿圖:

向下滾動(dòng)加載動(dòng)畫判斷條件:(代碼中addClass()函數(shù))

向上滾動(dòng)加載動(dòng)畫判斷條件:(代碼中addClass2()函數(shù))

3.代碼實(shí)現(xiàn):

HTML:

<div class="header">
 實(shí)現(xiàn)思路:先布局好靜態(tài)布局,再使用hover模擬動(dòng)畫行為,再改為類名on等用js進(jìn)行控制!
 </div>
 <div class="banner">
 <h1>前端開發(fā)</h1>
 <p>
 Web前端開發(fā)是從網(wǎng)頁(yè)制作演變而來的,名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中,
 網(wǎng)頁(yè)制作是Web1.0時(shí)代的產(chǎn)物,那時(shí)網(wǎng)站的主要內(nèi)容都是靜態(tài)的,用戶使用網(wǎng)站的行為也以
 瀏覽為主。
 </p>
 </div>
 <div class="con">
 <div class="con_l"><img src="images/1.jpg" alt="" /></div>
 <div class="con_2"><img src="images/2.jpg" alt="" /></div>
 </div>
 <div class="news">news</div>
 <div class="footer">footer</div>

CSS:

*{margin:0px;padding:0px;}//粗暴地清除默認(rèn)邊距
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;
}
//動(dòng)畫類
.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;
}
//動(dòng)畫類
.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 函數(shù)封裝*/
 //向下滾動(dòng)時(shí)
 function addClass(ele){
 var winH=$(window).height()*0.5;//可視窗口的高度的一半,更改0.5可以調(diào)整滾動(dòng)到底部、中部、頂部時(shí)候開始加載
 var top=$(window).scrollTop();//可視窗口的滾動(dòng)高度
 var ele_t=$(ele).offset().top;//內(nèi)容區(qū)的top
 var ele_h=$(ele).height();//內(nèi)容區(qū)的高

 //判斷條件,看草稿圖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');
 }
 }
 //向上滾動(dòng)時(shí),看草稿圖2!
 function addClass2(ele){
 var winH=$(window).height()*0.5;//更改0.5可以調(diào)整滾動(dòng)到底部、中部、頂部時(shí)候開始加載
 var top=$(window).scrollTop();//可視窗口的滾動(dòng)高度
 var ele_t=$(ele).offset().top;//內(nèi)容區(qū)的top
 var ele_h=$(ele).height();//內(nèi)容區(qū)的高

 //判斷條件
 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');
 }
 }
 //獲取前一次的滾動(dòng)高度(這里是第一次)
 var firstTop=$(window).scrollTop();

 $(window).scroll(function(){
 //每次滾動(dòng)重新獲取滾動(dòng)高度
 var lastTop=$(this).scrollTop();
 //后一次滾動(dòng)高度大于前一次滾動(dòng)高,說明向下滾動(dòng),否則想上滾動(dòng)!
 if(lastTop>firstTop){
 //加載對(duì)應(yīng)的內(nèi)容區(qū)域
 addClass('.banner');
 addClass('.con');
 }else{
 addClass2('.banner');
 addClass2('.con');
 }
 //每次都將后一次的滾動(dòng)高度賦值給前一次的滾動(dòng)高度
 firstTop=lastTop;
 });
});

4.總結(jié):

這種效果用于模擬滾動(dòng)加載動(dòng)畫內(nèi)容,重難點(diǎn)在于判斷滾動(dòng)的方向、相應(yīng)滾動(dòng)方向上加載動(dòng)畫時(shí)候的判斷條件,感覺邏輯還是有待提升的!

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用jQuery操作Cookies的實(shí)現(xiàn)代碼

    使用jQuery操作Cookies的實(shí)現(xiàn)代碼

    Cookies是一種能夠讓網(wǎng)站服務(wù)器把少量數(shù)據(jù)儲(chǔ)存到客戶端的硬盤或內(nèi)存,或是從客戶端的硬盤讀取數(shù)據(jù)的一種技術(shù)
    2011-10-10
  • jquery獲取一個(gè)元素下面相同子元素的個(gè)數(shù)代碼

    jquery獲取一個(gè)元素下面相同子元素的個(gè)數(shù)代碼

    本節(jié)主要介紹了jquery如何獲取一個(gè)元素下面相同子元素的個(gè)數(shù)代碼,需要的朋友可以參考下
    2014-07-07
  • 基于jquery的9行js輕松實(shí)現(xiàn)tab控件示例

    基于jquery的9行js輕松實(shí)現(xiàn)tab控件示例

    tab控件的實(shí)現(xiàn)方法有很多,在本文為大家詳細(xì)介紹下如何通過9行js實(shí)現(xiàn)簡(jiǎn)單的tab控件,感興趣的朋友不要錯(cuò)過
    2013-10-10
  • jQuery mobile轉(zhuǎn)換url地址及獲取url中目錄部分的方法

    jQuery mobile轉(zhuǎn)換url地址及獲取url中目錄部分的方法

    這篇文章主要介紹了jQuery mobile轉(zhuǎn)換url地址及獲取url中目錄部分的方法,轉(zhuǎn)換url地址本文中介紹的是將相對(duì)url轉(zhuǎn)化為絕對(duì)url,需要的朋友可以參考下
    2015-12-12
  • 詳談Ajax請(qǐng)求中的async:false/true的作用(ajax 在外部調(diào)用問題)

    詳談Ajax請(qǐng)求中的async:false/true的作用(ajax 在外部調(diào)用問題)

    下面小編就為大家?guī)硪黄斦凙jax請(qǐng)求中的async:false/true的作用(ajax返回值在外部調(diào)用問題)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-02-02
  • jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼

    jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼

    這篇文章主要介紹了jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
    2017-01-01
  • 最新評(píng)論