jQuery實(shí)現(xiàn)根據(jù)滾動(dòng)條位置加載相應(yīng)內(nèi)容功能
實(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í)有所幫助,也希望大家多多支持腳本之家。
- jQuery彈出層后禁用底部滾動(dòng)條(移動(dòng)端關(guān)閉回到原位置)
- jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法
- jquery 點(diǎn)擊元素后,滾動(dòng)條滾動(dòng)至該元素位置的方法
- jQuery實(shí)現(xiàn)定位滾動(dòng)條位置
- 使用jQuery判斷瀏覽器滾動(dòng)條位置的方法
- 頁(yè)面刷新時(shí)記住滾動(dòng)條的位置jquery代碼
- 通過JQuery將DIV的滾動(dòng)條滾動(dòng)到指定的位置方便自動(dòng)定位
- jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止
- JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置(示例代碼)
- JQuery獲取元素文檔大小、偏移和位置和滾動(dòng)條位置的方法集合
- jQuery實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到子元素位置(方便定位)
相關(guān)文章
基于jquery用于查詢操作的實(shí)現(xiàn)代碼
通過javascript得到用戶操作改變url參數(shù)從而實(shí)現(xiàn)某些功能,如查詢(具體的查詢由服務(wù)器端代碼得到url中的參數(shù)組成查詢語句實(shí)現(xiàn))。2010-05-05jquery中ajax調(diào)用json數(shù)據(jù)的使用說明
jquery里提供了便捷的ajax運(yùn)用,下面總結(jié)我自己的一些經(jīng)驗(yàn)2011-03-03學(xué)習(xí)從實(shí)踐開始之jQuery插件開發(fā) 對(duì)話框插件開發(fā)
之所以寫下這篇文章,是想將我的想法分享給大家;對(duì)于初學(xué)者,我希望他能從這篇文章中獲取對(duì)他有用的東西,對(duì)于經(jīng)驗(yàn)豐富的開發(fā)者,我希望他能指出我的不足,給我更多的意見和建議;目的就是共同進(jìn)步2012-04-04

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

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

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

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

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

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