基於jquery的垂直滾動觸發器，多引數可設定。

先上引數：

type:"show",           預設為「show」，「show」意為當能夠在可視區看到指定位置的節點時觸發，「scroll」意為瀏覽器滾動過指定結點時觸發。

pos:"#scrollbox",       預設為"#scrollbox"，通過此結點獲取指定位置。

delaydistance:0,       在指定位置的上下浮動距離，單位為畫素，可為負值。

single:true,            是否只觸發一次。 true（是）、false（不是）

passcallback:function(){},    超過指定位置的觸發函式。

backcallback:function(){}     小於指定位置時的觸發函式。

demo如下：

1.html

<

body 
style
="height: 6000px;"
>
<
div 
style
="height: 1000px;background:#ff0"
>
div>
<
div 
id="trigger1"
style
="height: 1500px;background: #f00;"
>
div>
div>

2.js(元件)

function

scrolltrigger(obj),
backcallback:
function
(){}
}this.passflag=false
; 
this.backflag=false
; $.extend(
this
.set,obj)
var _this=this
; 
this.init=function
()else
if(_this.set.single==true&&_this.passflag==true
)else
}if($(window).scrolltop()<$(_this.set.pos).offset().top+_this.set.delaydistance)
else
if(_this.set.single==true&&_this.backflag==true
)else}}
if(_this.set.type=="show")
else
if(_this.set.single==true&&_this.passflag==true
)else
}if($(window).scrolltop()+$(window).height()<$(_this.set.pos).offset().top+_this.set.delaydistance)
else
if(_this.set.single==true&&_this.backflag==true
)else}}
}) 
}this
.init();
}

3. js （呼叫）

var trigger1=new

scrolltrigger(,
backcallback:
function
() })

基於jquery的滾動選單 滾動條 的實現

本來是打算做乙個jquery外掛程式,只是本人水平屬於那種欠扁級別的,最近又比較忙,沒有時間學習jquery的外掛程式開發,所以,做這麼個小東西,供大家玩樂,呵呵.index.html是示例 scripts下的scrollable.js是這個小東西的js 寫的很爛,沒有什麼參考價值的.網路暱稱 se...

基於jquery的滾動選單 滾動條 的實現

本來是打算做乙個jquery外掛程式,只是本人水平屬於那種欠扁級別的,最近又比較忙,沒有時間學習jquery的外掛程式開發,所以,做這麼個小東西,供大家玩樂,呵呵.index.html是示例 scripts下的scrollable.js是這個小東西的js 寫的很爛,沒有什麼參考價值的.網路暱稱 se...

基於jQuery的連續hover觸發重複動畫

當我們設定hover實現動畫效果的時候，我們把滑鼠快速反覆在目標元素移來移去，會發現滑鼠最後離開後，動畫依然在進行很多次，有時會導致動畫錯亂。之所以會出現這種情況，是因為我們每次觸發hover時都會執行一次動畫，當我們來回這樣快速移動到目標元素上時並反覆操作，這時會導致動畫重複多次，而由於我們移動到...