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)文章
今天我們將來(lái)看一下MooTools綁定的Tooltip插件。通過(guò)“提示（Tips）”，你可以輕松地自定義一個(gè)包含一個(gè)標(biāo)題和內(nèi)容的工具提示，可以自定義樣式，自定義淡入淡出漸變效果。2009-09-09
Mootools 1.2教程 滾動(dòng)條（Slider）
到現(xiàn)在為止，初始化這些MooTools插件對(duì)象就會(huì)開(kāi)始變得越來(lái)越熟悉。滾動(dòng)條（Slider）沒(méi)有任何不同，你要?jiǎng)?chuàng)建一個(gè)新的滾動(dòng)條，定義滾動(dòng)條和滑塊相關(guān)的元素，然后設(shè)置你的選項(xiàng)，再創(chuàng)建一些回調(diào)事件的控制函數(shù)。2009-09-09
Mootools 圖片展示插件(lightbox,ImageMenu)收集集合
Mootools圖片展示插件(lightbox,ImageMenu)收集，學(xué)習(xí)mootools的朋友可以參考，非常不錯(cuò)的效果。2010-05-05
通過(guò)Mootools 1.2來(lái)操縱HTML DOM元素
今天我們來(lái)深入地學(xué)習(xí)一下如果操縱HTML元素。通過(guò)MooTools 1.2，你可以添加新元素到一個(gè)HTML頁(yè)面中，也可以刪除元素，以及改變?nèi)魏螛邮交蛘咴貐?shù)，這些都非常容易。2009-09-09
Mootools 1.2教程 輸入過(guò)濾第二部分（字符串）
今天我們來(lái)看一看MooTools給我們提供的額外的一些處理字符函數(shù)。這只是MooTools字符串處理中的一部分，并不包含一些神秘的函數(shù)（比如toCamelCase()）和使用正則表達(dá)式處理字符串的函數(shù)。2009-09-09
Mootools 1.2教程 設(shè)置和獲取樣式表屬性
今天，我們來(lái)看一下如何通過(guò)MooTools 1.2和我們以前幾講中的內(nèi)容來(lái)操作樣式，這將給你在UI上帶來(lái)很大的控制權(quán)。2009-09-09
Mootools 1.2教程 同時(shí)進(jìn)行多個(gè)形變動(dòng)畫(huà)
今天我們來(lái)學(xué)習(xí)一下Fx.Elements插件，這是一個(gè)基于Fx.Morph的插件。與應(yīng)用于單個(gè)元素不同的是，F(xiàn)x.Elements可以允許你一次性給多個(gè)元素添加動(dòng)畫(huà)。2009-09-09
基于mootools插件實(shí)現(xiàn)遮罩層新手引導(dǎo)
公司項(xiàng)目有這個(gè)需求，剛好這段時(shí)間在學(xué)習(xí)了mootools，于是把功能寫成了mootools插件，個(gè)人感覺(jué)mootools在這方面比jquery強(qiáng)多了2012-05-05
Mootools 1.2教程 定時(shí)器和哈希簡(jiǎn)介
在今天的教程中，我們將關(guān)注兩塊內(nèi)容：第一個(gè)就是.periodical();方法，然后我們?cè)賹?duì)hash做一個(gè)簡(jiǎn)介。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