代码精简的可以实现元素圆角的js函数


Posted in Javascript onJuly 21, 2007

上次在blueidea上看到一个元素圆角的实现方法,但是那个太复杂了。于是就自己写了一个函数,可以将元素自动圆角。 
演示地址:http://longbill.cn/down/sample/roundcorner.htm 
不要用在有 padding 值得元素上,最好是在外面套一层。详情见演示地址。 
代码: 
function RoundCorner(obj,style) 

/******** 
网页元素圆角函数!! 
作者: 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; 
       } 
}

Javascript 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
js Calender控件使用详解
Jan 05 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 #Javascript
用javascript实现读取txt文档的脚本
Jul 20 #Javascript
符合W3C网页标准的iframe标签的使用方法
Jul 19 #Javascript
javascript实现unicode和字符的互相转换
Jul 18 #Javascript
js实现的网页颜色代码表全集
Jul 17 #Javascript
JTrackBar水平拖动效果
Jul 15 #Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 #Javascript
You might like
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
js style动态设置table高度
2014/10/21 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
vue 点击按钮增加一行的方法
2018/09/07 Javascript
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
PyQt5 多窗口连接实例
2019/06/19 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
python tornado修改log输出方式
2019/11/18 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
一份婚庆公司创业计划书
2014/01/11 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
垂直极限观后感
2015/06/08 职场文书
学术研讨会主持词
2015/07/04 职场文书
培训简讯范文
2015/07/20 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL