MooTools 頁(yè)面滾動(dòng)浮動(dòng)層智能定位實(shí)現(xiàn)代碼
更新時(shí)間：2011年08月23日 23:37:28 作者：
MooTools 頁(yè)面滾動(dòng)浮動(dòng)層智能定位實(shí)現(xiàn)代碼，需要的朋友可以參考下。
HTML代碼：
<div class="float" id="float">
我是個(gè)靦腆羞澀的浮動(dòng)層...
</div>
JS代碼：
var $smartFloat = function(elements) {
var position = function(element) {
var top = element.getPosition().y, pos = element.getStyle("position");
window.addEvent("scroll", function() {
var scrolls = this.getScroll().y;
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.setStyles({
position: "fixed",
top: 0
});
} else {
element.setStyles({
top: scrolls
});
}
}else {
element.setStyles({
position: "absolute",
top: top
});
}
});
};
if ($type(elements) === "array") {
return elements.each(function(items) {
position(items);
});
} else if ($type(elements) === "element") {
position(elements);
}
};
//綁定
$smartFloat($("float"));
復(fù)制代碼 代碼如下:
<div class="float" id="float">
我是個(gè)靦腆羞澀的浮動(dòng)層...
</div>
JS代碼：
復(fù)制代碼 代碼如下:
var $smartFloat = function(elements) {
var position = function(element) {
var top = element.getPosition().y, pos = element.getStyle("position");
window.addEvent("scroll", function() {
var scrolls = this.getScroll().y;
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.setStyles({
position: "fixed",
top: 0
});
} else {
element.setStyles({
top: scrolls
});
}
}else {
element.setStyles({
position: "absolute",
top: top
});
}
});
};
if ($type(elements) === "array") {
return elements.each(function(items) {
position(items);
});
} else if ($type(elements) === "element") {
position(elements);
}
};
//綁定
$smartFloat($("float"));
您可能感興趣的文章:
相關(guān)文章
從今天開始，我們將開始講解“更多”（more）庫(kù)里面的更多插件。Sortables是一個(gè)非常強(qiáng)大的插件，能夠真正地?cái)U(kuò)大你的用戶界面設(shè)計(jì)的選擇面。2009-09-09
Mootools 1.2教程 滑動(dòng)效果（Slide）
今天繼續(xù)我們的Mootools 1.2教程的第23課，我們今天來(lái)講一下Fx插件中的Fx.Slide。通過(guò)該插件，可以讓你把內(nèi)容以滑動(dòng)的方式顯示出來(lái)。它使用起來(lái)非常簡(jiǎn)單，是你UI工具箱中一個(gè)很好的工具。2009-09-09
Mootools 1.2教程(3) 數(shù)組使用簡(jiǎn)介
在上一篇教程——《Mootools 1.2教程(2)——DOM選擇器》中，我們介紹了一下選擇器，其中有很多方法就會(huì)返回?cái)?shù)組（一個(gè)你可以對(duì)其中內(nèi)容進(jìn)行多種操作的特殊列表）。2009-09-09
使用Mootools動(dòng)態(tài)添加Css樣式表代碼,兼容各瀏覽器
這個(gè)函數(shù)很有用處,尤其是當(dāng)我們?cè)谑褂肕ootools開發(fā)插件的時(shí)候,例如Tips等,當(dāng)我們需要額外的Css來(lái)支撐插件內(nèi)的效果時(shí),通常我們的做法是把Css放到單獨(dú)的css文件里調(diào)用2011-12-12
講一講JavaScript中的函數(shù)（function）的基本知識(shí)。2009-09-09
Mootools 圖片展示插件(lightbox,ImageMenu)收集集合
Mootools圖片展示插件(lightbox,ImageMenu)收集，學(xué)習(xí)mootools的朋友可以參考，非常不錯(cuò)的效果。2010-05-05
Mootools 1.2教程 Fx.Morph、Fx選項(xiàng)和Fx事件
今天，我們繼續(xù)探索一下這個(gè)庫(kù)的Fx部分2009-09-09
分享一個(gè)用Mootools寫的鼠標(biāo)滑過(guò)進(jìn)度條改變進(jìn)度值的實(shí)現(xiàn)代碼
分享一個(gè)用Mootools寫的鼠標(biāo)滑過(guò)進(jìn)度條改變進(jìn)度值的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-12-12
在今天的教程中，我們將主要學(xué)習(xí)一下MooTools中類的實(shí)現(xiàn)和繼承（擴(kuò)展）。2009-09-09
Mootools 1.2教程 同時(shí)進(jìn)行多個(gè)形變動(dòng)畫
今天我們來(lái)學(xué)習(xí)一下Fx.Elements插件，這是一個(gè)基于Fx.Morph的插件。與應(yīng)用于單個(gè)元素不同的是，F(xiàn)x.Elements可以允許你一次性給多個(gè)元素添加動(dòng)畫。2009-09-09