代码精简的可以实现元素圆角的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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
jQuery插件制作的实例教程
May 16 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
JavaScript中继承原理与用法实例入门
May 09 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
python实现udp数据报传输的方法
2014/09/26 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
python中的错误处理
2016/04/10 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python实现句子翻译功能
2017/11/14 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Python grpc超时机制代码示例
2020/09/14 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
岗位聘任协议书
2015/09/21 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书