代码精简的可以实现元素圆角的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 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
发布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 和 COM
2006/10/09 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
php简单的上传类分享
2016/05/15 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python装饰器用法实例总结
2018/05/26 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
Django logging配置及使用详解
2019/07/23 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
九年级科学教学反思
2014/01/29 职场文书
社区工作者感言
2014/03/02 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
中等生评语大全
2014/05/04 职场文书
2014年国庆标语
2014/06/30 职场文书
政工例会汇报材料
2014/08/26 职场文书
单位婚育证明范本
2014/11/21 职场文书
个人工作决心书
2015/09/22 职场文书
如何拟写通知正文?
2019/04/02 职场文书