代码精简的可以实现元素圆角的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 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
二招解决php乱码问题
2012/03/25 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
实例讲解PHP表单处理
2019/02/15 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python Tkinter基础控件用法
2014/09/03 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
即兴演讲稿
2014/01/04 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
环保倡议书怎么写
2014/05/16 职场文书
主题团日活动总结
2014/06/25 职场文书
前台接待员岗位职责
2015/04/15 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python