基于mootools的圓角邊框擴展代碼_Mootools

來源：懂視網責編：小采時間：2020-11-27 20:47:13

基于mootools的圓角邊框擴展代碼_Mootools

基于mootools的圓角邊框擴展代碼_Mootools:JQuery下面有個擴展是用純JS生成的圓角，不過和DIV+CSS拼出來是一樣的道理，圓角看上去都比較粗糙。用背景圖片要好看得多，問題是不能拉伸，最簡單做法就是用四個角小圖片加邊框拼出來。不過這樣多出N多圖片，一堆亂七八糟的代碼，相當不爽。有一個很有技

推薦度：

點擊下載本文 文檔為doc格式

導讀基于mootools的圓角邊框擴展代碼_Mootools:JQuery下面有個擴展是用純JS生成的圓角，不過和DIV+CSS拼出來是一樣的道理，圓角看上去都比較粗糙。用背景圖片要好看得多，問題是不能拉伸，最簡單做法就是用四個角小圖片加邊框拼出來。不過這樣多出N多圖片，一堆亂七八糟的代碼，相當不爽。有一個很有技

JQuery下面有個擴展是用純JS生成的圓角，不過和DIV+CSS拼出來是一樣的道理，圓角看上去都比較粗糙。

用背景圖片要好看得多，問題是不能拉伸，最簡單做法就是用四個角小圖片加邊框拼出來。不過這樣多出N多圖片，一堆亂七八糟的代碼，相當不爽。

有一個很有技巧的方法，用一張大圖片+CSS來做，原理如下。

用一張大的背景圖片做圓角，用CSS分別取四個角和邊再拼成一個DIV。這樣不僅可以解決圓角，還可以生成其它特殊的邊框（比如陰影）。
但是每次使用都要加CSS也很不爽，于是用mootools寫了一個Element類的擴展。
代碼如下:
setBorder
Element.implement({
setBorder: function(pic, len) {
///

/// 設定容器邊框（圖片）.
/// 已測div
///

/// 圖片地址
/// 邊框寬度
///
var content = this.clone();
var width = this.getSize().x + len * 2;
var height = this.getSize().y + len * 2;
this.empty().setStyles({ 'width': width, 'height': height });
var lt = new Element('div', {
'styles': {
'width': len,
'height': len,
'float': 'left',
'background': 'url(' + pic + ') no-repeat left top'
}
});
var rt = new Element('div', {
'styles': {
'width': width - len,
'height': len,
'float': 'left',
'background': 'url(' + pic + ') no-repeat right top'
}
});
var lb = new Element('div', {
'styles': {
'width': len,
'height': height - len,
'float': 'left',
'background': 'url(' + pic + ') no-repeat left bottom'
}
});
var rb = new Element('div', {
'styles': {
'width': width - len,
'height': height - len,
'float': 'left',
'background': 'url(' + pic + ') no-repeat right bottom'
}
});
content.inject(rb, 'top');
lt.inject(this, 'top');
rt.injectBottom(this);
lb.injectBottom(this);
rb.injectBottom(this);
return this;
}
});

這樣在頁面上直接調用setBorder方法傳個背景圖片，邊框寬度進去就行了。

HTML代碼
代碼如下:

Untitled Page

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com