代码精简的可以实现元素圆角的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 DIV弹出效果实现代码
Jul 03 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
详解react、redux、react-redux之间的关系
Apr 11 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php GUID生成函数和类
2014/03/10 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python魔法方法详解
2019/02/13 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
新浪网技术部笔试题
2016/08/26 面试题
值传递还是引用传递
2015/02/08 面试题
UNIX命令速查表
2012/03/10 面试题
加多宝凉茶广告词
2014/03/18 职场文书
讲解员培训方案
2014/05/04 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
个人融资协议书
2014/10/02 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
SQL之各种join小结详细讲解
2021/08/04 MySQL