CSS圆角框组件

下载地址：http://files.cnblogs.com/binyong/4.rar

 

 

bRoundCurve 1.0.js 代码

/* #############################################################
Name: b_RoundCurve Css圆角框组件--冰极峰
Version: 1.0
Author: biny
Email:szbiny@163.com
冰极峰博客地址：http://www.cnblogs.com/binyong
你可以免费使用和修改代码，但请保留完整的版权信息。

有如下五种调用方法：
b_RoundCurve("bottom","#F8B3D0","#FFF5FA",1);//普通圆角框
b_RoundCurve("left1","#AE0474","#FB7D3F",3,"h3","","image/bg5.gif");//标题用背景图片
b_RoundCurve("right1","#863313","#84D4CA",3,"h3","#BAB556");//标题只用纯色背景
b_RoundCurve("right2","orange","",3,"h3","");//标题不带背景色
b_RoundCurve("top","#4C7C9B","",4);//圆角背景图片
b_RoundCurve("img","#999","#FFF5FA",2);//圆角IMG图片
################################################################# */

/*
圆角函数--Author: biny
传递7个参数
1.class类名
2.边框色
3.主体内容区背景色
4.风格切换方式，从1-5，5种圆角框样式，针对不同环境使用。
5.标题的html结构标签名
6.标题背景色
7.标题背景图片路径（和6是相斥的，两个选择一个）
*/
function b_RoundCurve(classname,b_c,bg_c,state,tagname,titlebg,titleimg){
var divs = getElementsByClassName(classname);
for ( var i = 0 ;i < divs.length;i ++ ){
var obj = divs[i];
var path = window.location.href; // 当前页面的路径
path = path.substring( 0 ,path.lastIndexOf( ' / ' ) + 1 );
// b标签的通用样式
var comstyle = " height:1px; font-size:1px;overflow:hidden; display:block; " ;
// b标签的结构样式
var b1 = " margin:0 5px; " ; // 和b8相同
var b2 = " margin:0 3px;border-right:2px solid; border-left:2px solid; " ; // 和b7相同
var b3 = " margin:0 2px;border-right:1px solid; border-left:1px solid; " ; // 和b6相同
var b4 = " margin:0 1px;border-right:1px solid; border-left:1px solid;height:2px; " ; // 和b5相同
var content = " border-right:1px solid;border-left:1px solid;overflow:hidden;position:relative; " ;
var bgColor = " background: " + bg_c + " ; " ; // 背景色

// img图片的背景定位
var imgPos2 = " background-position:-4px top; " ;
var imgPos3 = " background-position:-2px -1px; " ;
var imgPos4 = " background-position:-1px -2px; " ;
var conPos = " background-position:left -4px; " ;
var imgPos5 = " background-position:-1px bottom; " ;
var imgPos6 = " background-position:-2px bottom; " ;
var imgPos7 = " background-position:-4px bottom; " ;

// 定义一些变量，这些变量包含不同的样式，在各种风格中拼合组装
var imgBgStr,imgPos3,imgPos4,conPos,imgPos5,imgPos6,imgPos7;
var b_img2,b_img3,b_img4,b_img5,b_img6,b_img7,c_img,imgurl;

// 五种不同的风格切换
if (state == 1 ){ // 最通常使用的线框
// 组装样式
b_img2 = bgColor;
b_img3 = bgColor;
b_img4 = bgColor;
c_img = bgColor;
b_img5 = bgColor;
b_img6 = bgColor;
b_img7 = bgColor;
}
if (state == 2 ){ // 如果是img图片方式，则用背景模拟圆角,注意IMG标签必须显式指定宽高，否则在safari中显示不出来。
var imgObj = divs[i].getElementsByTagName( ' img ' )[ 0 ];
var imgheight = imgObj.height; // 图片高度
var contentheight = imgheight - 10 ; // 中间图片的高度
var imgweight = imgObj.width; // 图片宽度
obj.style.width = (imgweight + 2 ) + " px " ;
var imgsrc = imgObj.src.replace(path, '' ); // 图片文件的相当路径
var imgBgStr = " background:url( " + imgsrc + " ) no-repeat; " ;
// 组装样式
conPos = " height: " + contentheight + " px;width: " + imgweight + " px;overflow:hidden; " ;

b_img2 = imgBgStr + imgPos2;
b_img3 = imgBgStr + imgPos3;
b_img4 = imgBgStr + imgPos4;
c_img = conPos;
b_img5 = imgBgStr + " background-position:-1px - " + (imgheight - 4 ) + " px; " ;
b_img6 = imgBgStr + " background-position:-2px - " + (imgheight - 2 ) + " px; " ;
b_img7 = imgBgStr + " background-position:-4px - " + (imgheight - 1 ) + " px; " ;
imgurl = imgsrc;
}
if (state == 3 ){ // 如果是带标题方式，又可分为两种情况，一种直接用背景色，一种是用背景图片方式
var objh3 = obj.getElementsByTagName(tagname)[ 0 ];
if (titleimg != null ){ // 标题带水平平铺的背景图片
var bgimg = " background:url( " + titleimg + " ) repeat-x; " ;
b_img2 = bgimg + imgPos2;
b_img3 = bgimg + imgPos3;
b_img4 = bgimg + imgPos4;
// 标题栏样式
objh3.style.background = " url( " + titleimg + " ) repeat-x left -4px " ;
objh3.style.borderBottomColor = b_c;
}
else { // 标题不带水平平铺的背景图片
var bg_c = " background: " + titlebg + " ; " ; // 背景色
b_img2 = bg_c;
b_img3 = bg_c;
b_img4 = bg_c;
// 标题栏样式
objh3.style.background = titlebg;
objh3.style.borderBottomColor = b_c;
}
// 组装样式
c_img = bgColor;
b_img5 = bgColor;
b_img6 = bgColor;
b_img7 = bgColor;

}
if (state == 4 ){ // 如果是背景图片方式，则。。。
// 先从样式表中获取背景图片的样式,要求加入图片的容器明确定义宽度和高度，和背景图片，这是用在JS用来搜寻的依据。
var bgimg = getStyle(obj, " backgroundImage " );
var bgWidth = getStyle(obj, " width " );
bgimg = bgimg.replace(path, "" );
bgimg = bgimg.substring( 4 ,bgimg.length);
bgimg = bgimg.substring( 0 ,bgimg.length - 1 );
var bgimgheight = getStyle(obj, " height " ); // 图片的高度

bgimgheight = bgimgheight.replace( " px " , "" );
var contentheight = bgimgheight - 10 ; // 中间图片的高度,包含上下边框2px宽度
bgWidth = bgWidth.replace( " px " , "" );
bgWidth = bgWidth - 2 ;

bgimg = bgimg.replace( " url(\ "" , "" );
bgimg=bgimg.replace( " \ " ) " , "" ); // 获得背景图片的全部径。
path = path.substring( 0 ,(path.lastIndexOf( ' / ' ) + 1 )); // 页面地址
bgimg = bgimg.replace(path, "" );
imgBgStr = " background:url( " + bgimg + " ) no-repeat; " ;
obj.style.background = " none " ; // 将原始的背景图片隐藏
// 组装样式
b_img2 = imgBgStr + imgPos2;
b_img3 = imgBgStr + imgPos3;
b_img4 = imgBgStr + imgPos4;
c_img = imgBgStr + conPos + " height: " + contentheight + " px;width: " + bgWidth + " px; " ;

// 关键代码，特别是对图片的定位，需要知道图片的高度。
b_img5 = imgBgStr + " background-position:-1px - " + (bgimgheight - 4 ) + " px; " ;
b_img6 = imgBgStr + " background-position:-2px - " + (bgimgheight - 2 ) + " px; " ;
b_img7 = imgBgStr + " background-position:-4px - " + (bgimgheight - 1 ) + " px; " ;
}
if (state == 2 || state == 4 ){
conDivHeight = "" ;
}
else {
var H = getStyle(obj, " height " ); // 获到容器的高度
H = H.replace( " px " , "" ); // 去掉单位
conDivHeight = " height: " + (H - 8 ) + " px " ; // 容器的高度伪装成css中的设置的一样
}
/* 创建一个容器结构体 */
var rDivStr = " <b style=' " + comstyle + b1 + " background: " + b_c + " '></b> " ;
rDivStr += " <b style=' " + comstyle + b2 + " border-color: " + b_c + " ; " + b_img2 + " '></b> " ;
rDivStr += " <b style=' " + comstyle + b3 + " border-color: " + b_c + " ; " + b_img3 + " '></b> " ;
rDivStr += " <b style=' " + comstyle + b4 + " border-color: " + b_c + " ; " + b_img4 + " '></b> " ;
rDivStr += " <div style=' " + content + " border-color: " + b_c + " ; " + c_img + conDivHeight + " '> " ;
rDivStr += " @d_P " ;
rDivStr += " </div> " ;
rDivStr += " <b style=' " + comstyle + b4 + " border-color: " + b_c + " ; " + b_img5 + " '></b> " ;
rDivStr += " <b style=' " + comstyle + b3 + " border-color: " + b_c + " ; " + b_img6 + " '></b> " ;
rDivStr += " <b style=' " + comstyle + b2 + " border-color: " + b_c + " ; " + b_img7 + " '></b> " ;
rDivStr += " <b style=' " + comstyle + " margin:0 5px;background: " + b_c + " '></b> " ;

var htmlText = divs[i].innerHTML;
if (state == 2 ){
var str1 = htmlText.replace( " src=\ "" , " src = \ " * " );
var strsplit1 = str1.split( ' * ' )[ 0 ];
var strsplit2 = str1.split( ' * ' )[ 1 ];
var url = strsplit2.substring( 0 ,strsplit2.indexOf( ' \" ' ));
htmlText = strsplit1 + imgurl + " \ " style = ' border:0px;position:absolute;top:-4px;left:0px; '/ >";
}
rDivStr = rDivStr.replace( ' @d_P ' ,htmlText);
divs[i].innerHTML = rDivStr; // 替换结构
}
}

// 说明：准确获取指定元素 CSS 属性值
// 此函数的两个参数，elem为要获取的对象，name为样式属性，如“backgroundColor”
function getStyle( elem, name )
{
// 如果该属性存在于style[]中，则它最近被设置过(且就是当前的)
if (elem.style[name])
{
return elem.style[name];
}
// 否则，尝试IE的方式
else if (elem.currentStyle)
{
return elem.currentStyle[name];
}
// 或者W3C的方法，如果存在的话
else if (document.defaultView && document.defaultView.getComputedStyle)
{
name = name.replace( / ([A-Z]) / g, " -$1 " );
name = name.toLowerCase();
// 获取style对象并取得属性的值(如果存在的话)
var s = document.defaultView.getComputedStyle(elem, "" );
return s && s.getPropertyValue(name);
// 否则，就是在使用其它的浏览器
}
else
{
return null ;
}
}

/* 根据类名获得对象
调用方法：var topicnum=getElementsByClassName("classname");
*/
function getElementsByClassName(searchClass, node,tag){
if (document.getElementsByClassName){ return document.getElementsByClassName(searchClass)}
else {
node = node || document;
tag = tag || " * " ;
var classes = searchClass.split( " " ),
elements = (tag === " * " && node.all) ? node.all : node.getElementsByTagName(tag),
patterns = [],
returnElements = [],
current,
match;
var i = classes.length;
while ( -- i >= 0 ){patterns.push( new RegExp( " (^|\\s) " + classes[i] + " (\\s|$) " ));}
var j = elements.length;
while ( -- j >= 0 ){
current = elements[j];
match = false ;
for ( var k = 0 , kl = patterns.length; k < kl; k ++ ){
match = patterns[k].test(current.className);
if ( ! match) break ;
}
if (match) returnElements.push(current);
}
return returnElements;
}
}

 

 

示例代码：demo.html

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 冰极峰原创作品－－css圆角框组件 v1.0 </ title >
< style type ="text/css" >
/* ***************************************
CSS圆角框组件 v1.0
冰极峰原创
更多内容请访问：http://binyong.cnblogs.com/
**************************************** */
* { margin : 0 ; padding : 0 ; }
body { background : url(image/bg.gif) ; }
a:link,a:visited { text-decoration : none ; color : #fff ; }
a:hover { color : orange ; border-bottom : 1px orange solid ; }
h3 { height : 26px ; line-height : 26px ; font-size : 12px ; border-bottom : 1px #E3E197 solid ; padding : 0 10px ; color : #fff ; }
h4 { font-size : 12px ; text-indent : 20px ; border-bottom : none ; }
p { line-height : 22px ; text-indent : 10px ; padding : 0 10px ; }
.top { width : 490px ; height : 80px ; margin : 10px auto ; overflow : hidden ; background : url(image/topbg.gif) no-repeat right bottom ; text-align : center ; font-size : 12px ; font-weight : bold ; }
.top p { color : #fff ; font-weight : bold ; line-height : 24px ; }
h1 { font-size : 20px ; height : 20px ; color : #fff ; }
.wrapper { width : 490px ; margin : 0px auto ; font-size : 14px ; overflow : hidden ; margin-bottom : 10px ; }
.left { float : left ; width : 70% ; }
.left1 { font-size : 12px ; }
.img { float : left ; display : inline ; margin : 10px 0 0px 10px ; }
.left2 { font-size : 12px ; overflow : hidden ; margin-top : 10px ; }
.right { float : right ; width : 28% ; }
.right1 { margin-bottom : 10px ; font-size : 12px ; }
.right2 { margin-bottom : 10px ; font-size : 12px ; color : #fff ; }
.right3 { margin-bottom : 10px ; font-size : 12px ; }
.rightbgimg { background : url(image/img2.jpg) no-repeat right bottom ; width : 138px ; height : 104px ; text-align : center ; font-size : 12px ; color : #ffffff ; }
.bottom { clear : both ; width : 490px ; margin : 0px auto ; text-align : center ; font-size : 12px ; font-weight : bold ; height : 50px ; line-height : 50px ; }
.bottom a:link,.bottom a:visited { color : #000 ; }
.bottom a:hover { color : orange ; border-bottom : 1px orange solid ; }
.hasH { height : 100% ; overflow : hidden ; padding-bottom : 8px ; } /* for ie6 */
</ style >
</ head >
< body >
< div class ="top" >
< p > 冰极峰原创作品 </ p >
< h1 > css圆角框组件 v1.0 </ h1 >
< p > 博客地址： < a href ="http://binyong.cnblogs.com" title ="冰极峰博客" > http://binyong.cnblogs.com </ a ></ p >
</ div >
< div class ="wrapper" >
< div class ="left" >
< div class ="left1" >
< h3 > 标题带有背景图片 </ h3 >
< div class ="hasH" >
< p >< b > 组件优点： </ b ></ p >
< p > 1. 全面兼容所有浏览器 </ p >
< p > 2. 圆角不需要图片，直接代码生成，省去制图的麻烦。 </ p >
< p > 3. 自适应外框的大小，可广泛应用于布局区块中。 </ p >
< p > 4. 封装难以控制的CSS代码，调用灵活方便。 </ p >
< p > 5. 封装HTML结构，你只需定义你想要的结构，无冗余，更语义化。 </ p >
< p >< b > 组件缺点： </ b ></ p >
< p > 1. 不能定义线框的大小。如果你需要改变线框大小，本组件不适合你。 </ p >
< p > 2. 圆角不够圆滑，如果你对圆角图片的精度要求较高，不宜采用本组件。 </ p >
< p > 3. 线框颜色和背景色不宜采用对比太强烈的颜色，容易看出锯齿。 </ p >
</ div >
</ div >
< div class ="left2" >
< h3 > 下面圆角图片是img图片，而非背景图片。 </ h3 >
< div class ="hasH" >
< div class ="img" >< a href ="http://binyong.cnblogs.com/" title ="漂亮女孩1" target ="_blank" >< img src ="image/girl-1.jpg" height ="115" width ="154" alt ="漂亮女孩1" /></ a ></ div >
< div class ="img" >< a href ="http://binyong.cnblogs.com/" title ="漂亮女孩2" target ="_blank" >< img src ="image/girl-2.jpg" height ="115" width ="154" alt ="漂亮女孩2" /></ a ></ div >
</ div >
</ div >
</ div >

< div class ="right" >
< div class ="right1" >
< h3 > 标题带背景色 </ h3 >
< div class ="hasH" >
< p > 标题栏的背景色与内容区背景可以定义不同的颜色。这些颜色值都可以直接在CSS中定义。 </ p >
</ div >
</ div >
< div class ="right3" >
< h3 > 标题带有背景图片 </ h3 >
< div class ="hasH" >
< p > 标题栏也可以在样式表中定义背景图片，这张背景图片自动圆角化。 </ p >
</ div >
</ div >
< div class ="right2" >
< h3 > 标题栏透明 </ h3 >
< div class ="hasH" >
< p > 你可以只要线框，不加任何颜色和背景图片。 </ p >
</ div >
</ div >
< div class ="rightbgimg" >
< p >< br /> 装饰性背景图片 < br />
也可以圆角化 </ p >
</ div >
</ div >
</ div >
< div class ="bottom" >< a href ="http://binyong.cnblogs.com" title ="更多原创" > 冰极峰 </ a > 版权所有 </ div >
< script type ="text/javascript" src ="js/bRoundCurve 1.0.js" ></ script >
< script type ="text/javascript" >
b_RoundCurve( " bottom " , " #F8B3D0 " , " #FFF5FA " , 1 ); // 普通圆角框
b_RoundCurve( " left2 " , " #E0750F " , " #FFF2A5 " , 3 , " h3 " , "" , " image/bg3.gif " ); // 标题用背景图片
b_RoundCurve( " left1 " , " #AE0474 " , " #FB7D3F " , 3 , " h3 " , "" , " image/bg2.gif " ); // 标题用背景图片
b_RoundCurve( " right1 " , " #863313 " , " #84D4CA " , 3 , " h3 " , " #BAB556 " ); // 标题只用纯色背景
b_RoundCurve( " right2 " , " orange " , "" , 3 , " h3 " , "" ); // 标题不带背景色
b_RoundCurve( " right3 " , " #A0C044 " , " #E9F2CC " , 3 , " h3 " , "" , " image/bg1.gif " ); // 标题用背景图片
b_RoundCurve( " rightbgimg " , " #F38E1A " , "" , 4 ); // 圆角背景图片
b_RoundCurve( " top " , " #4E271A " , "" , 4 ); // 圆角背景图片
b_RoundCurve( " img " , " #999 " , " #FFF5FA " , 2 ); // 圆角IMG图片
</ script >
</ body >
</ html >

转载于:https://www.cnblogs.com/carekee/articles/1745160.html