CSS 圆角框进行JS封装版

网站建设 2021-07-03 08:42www.dzhlxh.cn网站建设

前序:本来前三篇文章已经将CSS圆角框讲解完毕,但从网友反馈中,都说到不好使用,因此有了这篇文章,本文主要是将前面的结果总结修订后进行JS封装,方便调用。

在本次封装中,增加了对真正img标签引用的图片实现圆角化,之前的圆角图片大多是基于背景图片的,因为纯css无法实现img图片的圆角,有了js的加入,就变成可能了。并且在这次封装过程中修正了上次的背景图片狼蚁网站SEO优化两个圆角图片的定位错误问题

其实这个控件的JS代码很简单,只需要用到innerHTML就可以完成其大部分工作,而真正的难点在于对于CSS样式的合并组合使用。

先看看最终效果截图:

图一

在我的CSS圆角框组件V1.0中,可以变化出6种基本风格的圆角框(至于颜色风格,则可以说是千变万化了)。它们分别是:

  1. 纯线框圆角。
  2. 标题线框圆角。不带背景色或背景图片,透明。
  3. 标题和内容区可分别自定义颜色圆角
  4. 标题背景图片圆角。标题带背景图片时,自动实现圆角。
  5. 装饰性背景图片圆角。容器有装饰性背景图片时,自动实现圆角。
  6. Img图片圆角。如果有img标签引用图片时,自动实现圆角。

js代码就不用详解了,都很简单,我在js中作了详细的注释说明,一看就会。狼蚁网站SEO优化说说这6种风格的调用方法:

第一种:纯线框圆角

这是最基本,也是应用最广泛的一种应用。只需一句话就可以了。

Js行为:

复制代码
代码如下:

b_RoundCurve("bottom","#F8B3D0","#FFF5FA",1);//普通圆角框

解释:四个参数,分别代表样式名称、边框色值、背景色值、风格参数。

Html结构:

复制代码
代码如下:

<div class="bottom"></div>

第二种:标题线框圆角

一般这种块状布局,都需要在页头加入标题,你可以使用h1~h6系列标签。

Js行为:

复制代码
代码如下:

b_RoundCurve("right2","orange","",3,"h3");//标题和内容区都透明

解释:五个参数,分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称,因为考虑了扩展性,当想使用其它的标签时,可以随时替换,如h1~h6系列标签。

Html结构:

复制代码
代码如下:

<div class="right2">
<h3>标题</h3>
<div>内容</div>
</div>

第三种:标题和内容区可分别自定义颜色圆角

与第二种风格差不多,差别在于可以分别定义标题和内容区的颜色值。

Js行为:

复制代码
代码如下:

b_RoundCurve("right1","#863313","#84D4CA",3,"h3","#BAB556");//标题只用纯色背景

解释:六个参数,分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称、标题背景色值。

Html结构:

复制代码
代码如下:

<div class="right1">
<h3>标题</h3>
<div>内容</div>
</div>

第四种:标题背景图片圆角

这种需要将标题的背景图片路径作为参数传入,有了背景图片,一般都不需要背景颜色了,所以将第六个参数值设为空:

Js行为:

复制代码
代码如下:

b_RoundCurve("right3","#A0C044","#E9F2CC",3,"h3","","image/bg1.gif");//标题用背景图片

解释:七个参数,分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称、标题背景色值、标题背景图片路径。

Html结构:

复制代码
代码如下:

<div class="right3">
<h3>标题</h3>
<div>内容</div>
</div>

第五种:装饰性背景图片圆角

这种圆角也是用得比较多的,这种风格要注意:在CSS中需要设置容器的宽高值,因为在js中会查找到这个图片的宽高值。

Js行为:

复制代码
代码如下:

b_RoundCurve("rightbgimg","#F38E1A","",4);//圆角背景图片

解释:四个参数,分别代表样式名称、边框色值、背景色值、风格参数。背景色值和背景图片只选其一,所以将第三个参数置为空。

Html结构:

复制代码
代码如下:

<div class=" rightbgimg "></div>

第六种:Img图片圆角

纯CSS方法是无法做到Img图片圆角的,但有JS的加入,就可以变相实现。原理和第五种相似,只是将这个Img的图片路径取出来,在js中以背景图片的方式加入到各个容器中去,然后再还原img标签。

Js行为:

复制代码
代码如下:

b_RoundCurve("img","#999","#FFF5FA",2);//圆角IMG图片

解释:四个参数,分别代表样式名称、边框色值、背景色值、风格参数。

Html结构:

最简洁的HTML结构,无冗余代码。

复制代码
代码如下:

<div class="img">
<a href="https://www.jb51.net/" title="漂亮女孩1" target="_blank">
<img src="image/girl-1.jpg" height="115" width="154" alt="漂亮女孩1"/>
</a>
</div>

组件优点:

全面兼容所有浏览器。
圆角不需要图片,直接代码生成,省去制图的麻烦。
自适应外框的大小,可广泛应用于布局区块中。
封装难以控制的CSS代码,调用灵活方便。
封装HTML结构,你只需定义你想要的结构,无冗余,更语义化。
组件缺点:

不能定义线框的大小。如果你需要改变线框大小,本组件不适合你。
圆角不够圆滑,如果你对圆角图片的精度要求较高,不宜采用本组件。
线框颜色和背景色不宜采用对比太强烈的颜色,容易看出锯齿。
本模型在以下浏览器中完美通过:

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
点击这儿下载完整的压缩包:

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板