代码精简的可以实现元素圆角的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 相关文章推荐
特殊情况下如何获取span里面的值
May 20 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
JavaScript实现前端网页版倒计时
Mar 24 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下使用以下代码连接并测试
2008/04/09 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
PHP实现文件上传与下载
2020/08/28 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
Python过滤列表用法实例分析
2016/04/29 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python ORM编程基础示例
2020/02/02 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
创联软件面试题笔试题
2012/10/07 面试题
传媒专业推荐信范文
2013/11/23 职场文书
材料会计岗位职责
2014/03/06 职场文书
公司总经理岗位职责
2014/03/15 职场文书
授权委托书范本
2014/04/03 职场文书
学校开学标语
2014/10/06 职场文书
商家认证委托书格式
2014/10/16 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
公司食堂管理制度
2015/08/05 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
二年级作文之动物作文
2019/11/13 职场文书