代码精简的可以实现元素圆角的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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
javascript里使用php代码实例
Dec 13 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
python爬取个性签名的方法
2018/06/17 Python
wxPython实现列表增删改查功能
2019/11/19 Python
python保留小数位的三种实现方法
2020/01/07 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
python的help函数如何使用
2020/06/11 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
自考生自我评价分享
2014/01/18 职场文书
车队司机自我鉴定
2014/03/02 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
监护人证明
2015/06/19 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技