代码精简的可以实现元素圆角的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为单选框checkbox绑定单击click事件
Dec 18 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
生成二维码方法汇总
Dec 26 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 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 resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
SQL注入攻击的种类有哪些
2013/12/30 面试题
DIY手工制作经营店创业计划书
2014/02/01 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
药品营销策划方案
2014/06/15 职场文书
应用心理学专业求职信
2014/08/04 职场文书
英语复习计划
2015/01/19 职场文书
甲午大海战观后感
2015/06/02 职场文书
广播体操比赛主持词
2015/06/29 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
MySQL的Query Cache图文详解
2021/07/01 MySQL
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python