代码精简的可以实现元素圆角的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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 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
php5.5中类级别的常量使用介绍
2013/10/02 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
window.name代替cookie的实现代码
2010/11/28 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Python实现简单的四则运算计算器
2016/11/02 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
spyder常用快捷键(分享)
2017/07/19 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python list格式数据excel导出方法
2018/10/31 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
爱心倡议书范文
2014/05/12 职场文书
团队精神的演讲稿
2014/05/14 职场文书
开业典礼致辞
2015/07/29 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
python 中的jieba分词库
2021/11/23 Python