代碼精簡的可以實現(xiàn)元素圓角的js函數(shù)
更新時間:2007年07月21日 00:00:00 作者:
上次在blueidea上看到一個元素圓角的實現(xiàn)方法,但是那個太復(fù)雜了。于是就自己寫了一個函數(shù),可以將元素自動圓角。
演示地址:http://longbill.cn/down/sample/roundcorner.htm
不要用在有 padding 值得元素上,最好是在外面套一層。詳情見演示地址。
代碼:
function RoundCorner(obj,style)
{
/********
網(wǎng)頁元素圓角函數(shù)!!
作者: Longbill
主頁: www.longbill.cn
********/
var r = [];
var styles = [
{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},
{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"] },
{top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},
{top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}
]; //author: longbill.cn
if (!style || style>styles.length) style = 1;
style--;
var btop = styles[style].top,bbottom = styles[style].bottom;
obj = document.getElementById(obj);
if (!obj) return;
var HTML = obj.innerHTML;
obj.innerHTML = "";
for(var istop=1;istop>=0;istop--)
{
var topborder = document.createElement("b");
topborder.style.display = "block";
topborder.style.height = "2px";
topborder.style.backgroundColor = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF";
for(var i=0;i<btop.length;i++)
{
var b = document.createElement("b");
if (obj.style.backgroundColor)
b.style.backgroundColor = obj.style.backgroundColor;
else if (obj.className)
b.className = obj.className;
b.style.display = "block";
b.style.margin = (istop)?btop[i]:bbottom[i];
b.style.height = "1px";
b.style.overflow = "hidden";
b.style.width = "auto";
topborder.appendChild(b);
}
obj.appendChild(topborder);
if (istop) obj.innerHTML+=HTML;
}
}
演示地址:http://longbill.cn/down/sample/roundcorner.htm
不要用在有 padding 值得元素上,最好是在外面套一層。詳情見演示地址。
代碼:
function RoundCorner(obj,style)
{
/********
網(wǎng)頁元素圓角函數(shù)!!
作者: Longbill
主頁: www.longbill.cn
********/
var r = [];
var styles = [
{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},
{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"] },
{top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},
{top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}
]; //author: longbill.cn
if (!style || style>styles.length) style = 1;
style--;
var btop = styles[style].top,bbottom = styles[style].bottom;
obj = document.getElementById(obj);
if (!obj) return;
var HTML = obj.innerHTML;
obj.innerHTML = "";
for(var istop=1;istop>=0;istop--)
{
var topborder = document.createElement("b");
topborder.style.display = "block";
topborder.style.height = "2px";
topborder.style.backgroundColor = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF";
for(var i=0;i<btop.length;i++)
{
var b = document.createElement("b");
if (obj.style.backgroundColor)
b.style.backgroundColor = obj.style.backgroundColor;
else if (obj.className)
b.className = obj.className;
b.style.display = "block";
b.style.margin = (istop)?btop[i]:bbottom[i];
b.style.height = "1px";
b.style.overflow = "hidden";
b.style.width = "auto";
topborder.appendChild(b);
}
obj.appendChild(topborder);
if (istop) obj.innerHTML+=HTML;
}
}
相關(guān)文章
JavaScript高級程序設(shè)計 閱讀筆記(四) ECMAScript中的類型轉(zhuǎn)換
ECMAScript中的類型轉(zhuǎn)換,學(xué)習(xí)js的朋友可以看看2012-02-02
iframe的onload在Chrome/Opera中執(zhí)行兩次Bug的解決方法
創(chuàng)建iframe對象,添加load事件, 再將iframe添加到body中。Chrome/Opera中會造成load事件的handler執(zhí)行兩次。2011-03-03
JS實現(xiàn)網(wǎng)頁滾動條感應(yīng)鼠標(biāo)變色的方法
這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁滾動條感應(yīng)鼠標(biāo)變色的方法,實例分析了javascript針對鼠標(biāo)事件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
Javascript技術(shù)難點之a(chǎn)pply,call與this之間的銜接
這篇文章主要介紹了Javascript技術(shù)難點之a(chǎn)pply,call與this之間的銜接的相關(guān)資料,需要的朋友可以參考下2015-12-12
JavaScript高階API數(shù)組reduce函數(shù)使用示例
這篇文章主要為大家介紹了JavaScript數(shù)組高階API?reduce函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11
Javascript實現(xiàn)關(guān)聯(lián)數(shù)據(jù)(Linked Data)查詢及注意細節(jié)
DBpedia對Wikipedia的數(shù)據(jù)變成Linked Data形式,使得機器也能讀懂并自由獲得這些數(shù)據(jù);本文的主要目的是利用Javascript從DBpedia中獲取我們想要的數(shù)據(jù),感興趣的朋友可以參考下,希望可以幫助到你2013-02-02

