jQuery根據滾動條位置載入相應的內容
1.目標:
實現jQuery根據滾動條位置載入相應的內容:向下滾動時當內容區域滾動到可視視窗高度的一半時,載入動畫內容;向上滾動到相應的內容區域時也重新載入動畫內容!
2.實現思路:
先靜態佈局好HTML結構,使用偽類:hover模擬動畫效果,再使用jQuery 控制動畫類名的切換來實現效果!主要判斷滾動的方向,以及相應方向上載入動畫的時機(即何時才載入動畫的判斷條件!關鍵點!)。
3.思維草稿圖:
向下滾動載入動畫判斷條件:(程式碼中addClass()函式)
向上滾動載入動畫判斷條件:(程式碼中addClass2()函式)
4.程式碼實現:
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="" /></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;}//粗暴地清除預設邊距
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;
});
});
5.總結:
這種效果用於模擬滾動載入動畫內容,重難點在於判斷滾動的方向、相應滾動方向上載入動畫時候的判斷條件,感覺邏輯還是有待提升的!q(≧▽≦q)
相關文章
- 拖動滾動條實現內容自動載入效果
- jQuery實現的設定滾動條的位置jQuery
- jQuery內容橫向拖拽滾動jQuery
- css浮動元素寬度根據內容自適應CSS
- 拖動滾動條實現網頁內容自動載入程式碼例項網頁
- 網頁內容部分設滾動條網頁
- 根據不同的瀏覽器載入相應的CSS檔案本瀏覽器CSS
- css實現隱藏滾動條並可以滾動內容CSS
- jQuery寫的文章內容頁右側浮動滾動jQuery
- 使用js控制滾動條的位置JS
- popWindow 根據內容計算高度
- 根據編號展開內容
- uniapp根據導航欄的標題定位到相應錨點位置APP
- jquery在瀏覽器滾動條上的應用jQuery瀏覽器
- 3種方法實現CSS隱藏滾動條並可以滾動內容CSS
- JavaScript 滾動條定位指定位置JavaScript
- react記錄頁面的滾動條位置React
- html/css 滾動到元素位置,顯示載入動畫HTMLCSS動畫
- 如何隱藏scroll-Y縱向滾動條,並不影響內容滾動的方法
- 根據字典,轉成相應的進位制
- matlab根據rgb通道值用plot畫相應顏色的線條Matlab
- JavaScript字串物件 之 根據字元返回位置、根據位置返回字元、字串操作方法JavaScript字串物件字元
- jQuery load()方法載入指定檔案內容jQuery
- 我一個div有橫向滾動條,如何讓他頁面一載入就讓他滾動到中間的位置
- 根據IP定位地理位置
- iphone根據文字內容調整label高度的方法。iPhone
- Vue 返回記住滾動條位置詳解Vue
- 拖動滾動條載入資料程式碼例項
- 使用jQuery和YQL,以Ajax方式載入外部內容jQuery
- 11 個最佳 jQuery 滾動條外掛jQuery
- 根據條件動態更新不同表的資料
- jQuery根據滑鼠進入的方位出現動畫遮罩效果jQuery動畫遮罩
- 根據作業系統程式號檢視oracle對應的SQL語句內容作業系統OracleSQL
- vue 滾動載入Vue
- 論移動裝置內容的橫向滾動和豎向滾動
- 根據瀏覽器的滑動條 固定導航欄瀏覽器
- js根據checkbox的選中轉態輸出整行內容JS
- django根據不同git分支載入不同配置DjangoGit