代码精简的可以实现元素圆角的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同时按下两个方向键
Dec 01 Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
jQuery的三种$()
Dec 30 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 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面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
Python聊天室实例程序分享
2016/01/05 Python
python爬虫使用cookie登录详解
2017/12/27 Python
Django实现学员管理系统
2019/02/26 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
使用python+whoosh实现全文检索
2019/12/09 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
韩国现代百货官网:Hmall
2018/03/21 全球购物
Ajax和javascript的区别
2013/07/20 面试题
电气专业推荐信范文
2013/11/18 职场文书
《学会待客》教学反思
2014/02/22 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
企业后勤岗位职责
2014/02/28 职场文书
2014年网管工作总结
2014/12/11 职场文书
送达通知书
2015/04/25 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
Python matplotlib绘制雷达图
2022/04/13 Python