代码精简的可以实现元素圆角的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操作checkbox选择(list/table)
Apr 07 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 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 获取客户端的真实ip
2009/11/30 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Django如何配置mysql数据库
2018/05/04 Python
python代码过长的换行方法
2018/07/19 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
python对execl 处理操作代码
2020/06/22 Python
python右对齐的实例方法
2020/07/05 Python
一文读懂Python 枚举
2020/08/25 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
单位租房协议书样本
2014/10/30 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
主持人大赛开场白
2015/05/29 职场文书
小学英语教学随笔
2015/08/14 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL