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"));
復制代碼 代碼如下:
<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"));
相關文章
從今天開始，我們將開始講解“更多”（more）庫里面的更多插件。Sortables是一個非常強大的插件，能夠真正地擴大你的用戶界面設計的選擇面。2009-09-09
今天繼續(xù)我們的Mootools 1.2教程的第23課，我們今天來講一下Fx插件中的Fx.Slide。通過該插件，可以讓你把內(nèi)容以滑動的方式顯示出來。它使用起來非常簡單，是你UI工具箱中一個很好的工具。2009-09-09
在上一篇教程——《Mootools 1.2教程(2)——DOM選擇器》中，我們介紹了一下選擇器，其中有很多方法就會返回數(shù)組（一個你可以對其中內(nèi)容進行多種操作的特殊列表）。2009-09-09
使用Mootools動態(tài)添加Css樣式表代碼,兼容各瀏覽器
這個函數(shù)很有用處,尤其是當我們在使用Mootools開發(fā)插件的時候,例如Tips等,當我們需要額外的Css來支撐插件內(nèi)的效果時,通常我們的做法是把Css放到單獨的css文件里調(diào)用2011-12-12
講一講JavaScript中的函數(shù)（function）的基本知識。2009-09-09
Mootools 圖片展示插件(lightbox,ImageMenu)收集集合
Mootools圖片展示插件(lightbox,ImageMenu)收集，學習mootools的朋友可以參考，非常不錯的效果。2010-05-05
Mootools 1.2教程 Fx.Morph、Fx選項和Fx事件
今天，我們繼續(xù)探索一下這個庫的Fx部分2009-09-09
分享一個用Mootools寫的鼠標滑過進度條改變進度值的實現(xiàn)代碼
分享一個用Mootools寫的鼠標滑過進度條改變進度值的實現(xiàn)代碼，需要的朋友可以參考下。2011-12-12
在今天的教程中，我們將主要學習一下MooTools中類的實現(xiàn)和繼承（擴展）。2009-09-09
今天我們來學習一下Fx.Elements插件，這是一個基于Fx.Morph的插件。與應用于單個元素不同的是，F(xiàn)x.Elements可以允許你一次性給多個元素添加動畫。2009-09-09