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