每天學一個jquery外掛-仿樓梯滾動
技術標籤：每天學一個jquery外掛javascriptjquery
每天一個jquery外掛
——仿樓梯滾動
作為一個萌新前端，現在就處於一個知其然而不知其所以然的狀態，所以說打算每天敦促自己找一個jquery外掛進行模仿學習實現，今天打想模仿實現的是經典的輪播圖。
流程如下
- 首先分析模仿目標
- 然後拆解裡面動作，討論咋實現
- 接著先直接寫出功能，檢查bug
- 最後打包再檢查一遍bug
嗯很多網頁都能看到類似於分類或者錨點導航的側邊欄，一般是為了方便使用者能一覽全域性和快速找到自己想要瀏覽的地方並前往，大家不可能沒見過，至少某些考試做題的頁面完事之後會有那種錯題檢查的的頁面絕對是有過類似的功能，不過那些都是通過錨點座標做的，我這裡就搞一下jquery外掛的版本，目的是用很少的引數實現很現實的功能外加能夠拓展寫下去的思路，沒毛病，開找
我實現的情況
討論一下需要啥引數，首先必須得有所有要切換對應容器的id，其次我得計算出他們的容器本身的高度外加它在當前頁面中所在高度，這樣子我就能監控頁面滾動的時候看看達到了哪一個容器之間的需求，其次就是右邊的列表本身必須是有序的，否則會讓畫面顯得不是那麼連貫，下面先上未打包的程式碼。
css部分
/*清除所有初始的邊距*/
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
#f1,#f2,#f3,#f4,#f5,#f6,#f7{
width: 100%;
height: 100%;
}
#f1{
background-color html部分
<div id="f1"></div>
<div id="f2"></div>
<div id="f3"></div>
<div id="f4"></div>
<div id="f5"></div>
<div id="f6"></div>
<div id="f7"></div>
<div id="boxs">
<div id="mf1" class="box boxcheck">紅</div>
<div id="mf2" class="box">橙</div>
<div id="mf3" class="box">黃</div>
<div id="mf4" class="box">綠</div>
<div id="mf5" class="box">青</div>
<div id="mf6" class="box">藍</div>
<div id="mf7" class="box">紫</div>
<div id="mf0" class="box">置頂</div>
</div>
js部分
$(function(){
//初始化一個數組
var items=[
{
id:'f1'
},
{
id:'f2'
},
{
id:'f3'
},
{
id:'f4'
},
{
id:'f5'
},
{
id:'f6'
},
{
id:'f7'
}
]
//初始化所有物件的引數
for(var i = 0;i<items.length;i++){
items[i].top=$("#"+items[i].id)[0].offsetTop
items[i].height = $("#"+items[i].id).height();
}
//滾動條監控
$(document).scroll(function(){
var temp = gettarget()
boxcheck(temp)
})
//獲得當前目標下標
var gettarget = function(){
var flag = true;
var temp=$(this).scrollTop();
for (var i = 0;i<items.length;i++) {
if(items[i].top+items[i].height/1.5>=temp){
return i;
flag=false;
break;
}
}
if(flag){
return items.length-1;
}
}
//選單選中當前下標
var boxcheck = function(count){
var temp = null;
for(var i = 0;i<items.length;i++){
$("#m"+items[i].id).removeClass('boxcheck')
if(i==count){
temp=$("#m"+items[i].id);
}
}
temp.addClass('boxcheck')
}
//置頂操作
$("#mf0").click(function(){
$('html').stop().animate({
scrollTop:'0px'
},500)
})
//對應按鈕點選之後頁面定位
for(let i=0;i<items.length;i++){
$("#m"+items[i].id).click(function(){
$('html').stop().animate({
scrollTop:items[i].top+'px'
},500)
})
}
})
綜上所述，想要弄懂這個外掛的執行過程只要知道js中有監控頁面滾動的事件與dom本身就能查詢到自己所處頁面當前的高度，然後花點心思找到主軸就行了，這個外掛的主軸就是頁面的滾動，它是驅動所有事件執行和引數改變的關鍵，所以當我們分清主次之後就很容易的能夠將引數和事件分離開來，並且還能解決上述程式碼中的一些小bug和冗餘，下面放上程式碼，解決的bug就是當頁面載入過一次之後視窗大小發生改滾動條就會不正常顯示，這是因為裡面的引數在計算的時候並沒有考慮還會有對應的變化，完善的就在下面程式碼中註釋處理辦法
jquery打包部分
var glt = function(arr) {
//初始化目標物件
var getmore = function() {
for (var i = 0; i < arr.length; i++) {
arr[i].dom = $("#" + arr[i].id),
arr[i].top = $("#" + arr[i].id)[0].offsetTop,
arr[i].height = $("#" + arr[i].id).height()
}
}
getmore();
//進行排序,確定先後順序
var getsort = function() {
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j].top > arr[j + 1].top) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
}
getsort();
//渲染控制元件
var dorender = function() {
var hs = "<div id='boxs'>"
for (var i = 0; i < arr.length; i++) {
if (i == 0) {
hs = hs + "<div id='m" + arr[i].id + "' class='box'>" + arr[i].name + "</div>";
} else {
hs = hs + "<div id='m" + arr[i].id + "' class='box'>" + arr[i].name + "</div>";
}
}
hs = hs + "<div id='mf0' class='box'>置頂</div>"
var hs = hs + "</div>"
$('body').append(hs);
var $boxs = $("#boxs");
var $box = $(".box");
$boxs.css({
'width': '60px',
'min-height': '350px',
'position': 'fixed',
'bottom': '0px',
'right': '0px',
'margin': '30px'
})
$box.css({
'width': '50px',
'height': '50px',
'background-color': 'white',
'margin': '5px auto',
'cursor': 'pointer',
'display': 'flex',
'justify-content': 'center',
'align-items': 'center'
})
$("#m" + arr[0].id).css({
'background-color': 'black',
'color': 'white'
})
//滑鼠懸浮移出
$box.mouseenter(function() {
$(this).css({
'background-color': 'lightgray',
'color': 'black'
})
})
$box.mouseleave(function() {
$(this).css({
'background-color': 'white',
'color': 'black'
})
var temp = gettarget()
boxcheck(temp)
})
}
dorender();
//滾動條監控
$(document).scroll(function() {
var temp = gettarget()
boxcheck(temp)
})
//獲得當前目標下標
var gettarget = function() {
var flag = true;
var temp = $(this).scrollTop();
for (var i = 0; i < arr.length; i++) {
if (arr[i].top + arr[i].height / 1.5 >= temp) {
return i;
flag = false;
break;
}
}
if (flag) {
return arr.length - 1;
}
}
//選單選中當前下標
var boxcheck = function(count) {
var temp = null;
for (var i = 0; i < arr.length; i++) {
$("#m" + arr[i].id).css({
'background-color': 'white',
'color': 'black'
})
if (i == count) {
temp = $("#m" + arr[i].id);
}
}
temp.css({
'background-color': 'black',
'color': 'white'
})
}
//置頂操作
$("#mf0").click(function() {
$('html').stop().animate({
scrollTop: '0px'
}, 500)
})
//對應按鈕點選之後頁面定位
for (let i = 0; i < arr.length; i++) {
$("#m" + arr[i].id).click(function() {
$('html').stop().animate({
scrollTop: arr[i].top + 'px'
}, 500)
})
}
//監控頁面視口變化，重新獲取物件引數
window.onresize=function(){
getmore();
}
}
//使用方式
var arr = [
{id:"f1",name:"紅"},
{id:"f2",name:"橙"},
{id:"f3",name:"黃"},
{id:"f4",name:"綠"},
{id:"f5",name:"青"},
{id:"f6",name:"藍"},
{id:"f7",name:"紫"}
];
glt(arr)
這樣子打包之後的外掛只需要提供一份引數就能夠實現我上面圖片的效果啦，不過要注意的是，我並沒有過多的考慮bug的應對方式，就好像一個顧客去酒吧點了一碗炒飯的那個冷笑話一樣，必須要讓大家接受一下被使用者支配的恐懼
一個測試工程師走進一家酒吧，要了一杯啤酒
一個測試工程師走進一家酒吧，要了一杯咖啡
一個測試工程師走進一家酒吧，要了0.7杯啤酒
一個測試工程師走進一家酒吧，要了-1杯啤酒
一個測試工程師走進一家酒吧，要了2^32杯啤酒
一個測試工程師走進一家酒吧，要了一杯洗腳水
一個測試工程師走進一家酒吧，要了一杯蜥蜴
一個測試工程師走進一家酒吧，要了一份[email protected]!&*(@
一個測試工程師走進一家酒吧，什麼也沒要
一個測試工程師走進一家酒吧，又走出去又從窗戶進來又從後門出去從下水道鑽進來
一個測試工程師走進一家酒吧，又走出去又進來又出去又進來又出去，最後在外面把老闆打了一頓
一個測試工程師走進一
一個測試工程師走進一家酒吧，要了一杯燙燙燙的錕斤拷
一個測試工程師走進一家酒吧，要了NaN杯Null
1T測試工程師衝進一家酒吧，要了500T啤酒咖啡洗腳水野貓狼牙棒奶茶
1T測試工程師把酒吧拆了
一個測試工程師化裝成老闆走進一家酒吧，要了500杯啤酒並且不付錢
一萬個測試工程師在酒吧門外呼嘯而過
一個測試工程師走進一家酒吧，要了一杯啤酒’;DROP TABLE 酒吧
測試工程師們滿意地離開了酒吧。
然後一名顧客點了一份炒飯，酒吧炸了
最後我在這裡記一下我在實現功能之中遇到的問題，等我以後知道了再寫回來，就像我原生和打包的程式碼之中有個確定box狀態的boxcheck類，在需要這個表現外觀的時候我可以通過簡單的給予和拿走這個類就能達到動畫效果，但是在js打包的時候我只能用$.css({})來控制動畫效果，因為我的目的是完全打包成一個jquery外掛，那麼能不能在jquery中就給當前頁面的樣式裡面寫上一個類，在接下來的操作中能直接使用這個臨時寫出來的類呢？
外掛上傳地址(暫未通過稽核)