代码精简的可以实现元素圆角的js函数

上次在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; 
       } 
}

赞 (0)

相关推荐

  • 爆炸式的JS圆形浮动菜单特效代码

    爆炸式的JS圆形浮动菜单特效代码

    演示代码 http://demo.jb51.net/js/other/baozha.htm

  • 使用js画图之圆、弧、扇形

    半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA;  y = y0+rsinA ,A为弧度 样例:http://www.zhaojz.com.cn/demo/draw6.html 一.圆 复制代码 代码如下: //圆形/椭圆 //dot 圆点 //r 半径 //compressionRatio 垂直压缩比 function drawCircle(dot, r, compressionRatio, data){     var pstart = [dot[0]

  • JS实现简单的Canvas画图实例

    定义变量:[javascript] 复制代码 代码如下: var startX; var startY; var endX; var endY; var radius; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var select = document.getElementsByTagName("select"

  • 用js实现的抽象CSS圆角效果!!

    大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如: <html> <head> <title>css圆角效果</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style type="text/css"> div.RoundedCorne

  • 使用JS画图之点、线、面

    JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 这里的点我们使用span标签表示 复制代码 代码如下: //描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象 function drawPoint(opts){     document.write("<span id='"+opts.point[0]+&q

  • 用js实现CSS圆角生成更新

    用js生成任意圆角,下一步就是加入直角导角,圆角导外,外圆角导个,还有边框处理,阴影生成,还有柔化处理都是以后的重点和难点. 中工工基 人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压 械夺棋栽夺苛夺棋地花样百出地模压械夺棋栽夺中工工基 人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压 械夺棋栽夺苛夺棋地花样百出地模压械夺棋栽夺 makeroalj("modul","con

  • JS画图(非VML)--兼容IE/FF

    Untitled 1 .style1 { font-size: x-small; } function makedot(x,y){ //画点函数 document.write(" ") } /** 函数功能:根据给定的圆心和半径画圆 函数思路:根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标,并画出来. */ function circle(x,y,r){ //(x,y)圆心,r半径 var dotx,doty,radio; var Pi=Math.PI; makedot

  • 代码精简的可以实现元素圆角的js函数

    上次在blueidea上看到一个元素圆角的实现方法,但是那个太复杂了.于是就自己写了一个函数,可以将元素自动圆角.  演示地址:http://longbill.cn/down/sample/roundcorner.htm  不要用在有 padding 值得元素上,最好是在外面套一层.详情见演示地址.  代码:  function RoundCorner(obj,style)  {  /********  网页元素圆角函数!!  作者: Longbill  主页: www.longbill.cn 

  • 一个获取第n个元素节点的js函数

    一个获取第n个元素节点的函数,现在只能通过html标签获取元素,功能还不完善 演示:html <ul id="list"> <li>1<button>a</button></li> <li>2<button>b</button><button>o</button></li> <p>test</p> <li>3<bu

  • Ajax中通过JS代码自动获取表单元素值的示例代码

    我们在使用Ajax的时候,通常需要获取表单元素值,然后发送给后台的服务器端程序处理.如果表单元素不多的情况我们常常会通过GET方式来获取表单元素值,但如果表单元素非常多,此时就需要用POST方式来获取表单元素值,那么如何来获取表单元素值呢?下面给出一段JS代码即可自动获取表单元素的值了. function getFormQueryString(frmID) //frmID是表单的ID号,请在表单form中先命名一个ID号 { var frmID=document.getElementById(f

  • 用python一行代码得到数组中某个元素的个数方法

    想法由来 今天写代码过程中遇到一个需求,计算一个list中数值为1的元素的个数,其中这个list的元素数值不是为0就是为1. 一开始想到的是写个方法来计算: # 返回一个0,1数组中1的数量 def num_one(source_array): count = 0 for x in source_array: if x == 1: count += 1 return count 嗯好吧,然后觉得这是最low的方法了,就在想强大的python可不可以一行代码就做到以上的效果,然后发现真的可以. c

  • Java代码精简之道(推荐)

    前言 古语有云: 道为术之灵,术为道之体:以道统术,以术得道. 其中:"道"指"规律.道理.理论","术"指"方法.技巧.技术".意思是:"道"是"术"的灵魂,"术"是"道"的肉体:可以用"道"来统管"术",也可以从"术"中获得"道". 在拜读大佬"孤尽&qu

  • js函数名与form表单元素同名冲突的问题

    今天在导出Excel的时候用了Form 表单的input hidden 来区分导出和搜索.开始的时候js中的onClick事件的函数名 和 hidden 中的 id 命名一样.结果导致报错:调用函数的那一行对象不支持此属性. 找了很长时间都找不出原因,开始的时候一直以为是写错了某个字母,才发现js函数根本没有执行.后来没有办法直接调用了别的函数,发现就有用了,认为是函数名的原因,改了函数名才有用了.然后再将input中的id改成很函数名一样,又出现报错了.在没有下例验证之前,还一直以为是Thin

  • Python实现将元组中的元素作为参数传入函数的操作

    本文由Markdown语法编辑器编辑完成. 1. 需求: 现在有一个Python的需求需要实现: 就是实现连接一次数据库,就能够执行多条SQL语句,而且这个SQL语句是需要通过调用者将每一次执行的参数传入进来,组合成一条完整的SQL语句再去执行. 经过初步研究,传入参数时,通过数组的形式,数组中的每一个元素则是一个元组tuple(因为SQL中需要填入的参数可能是多个,所以需要通过元组的形式传入). 比如SQL语句的形式为: basic_sql = 'SELECT * FROM series se

  • 怎么通过onclick事件获取js函数返回值（代码少）

    具体过程不做详细叙述,直接上代码: 写一个弹出框,绑定onclick事件是好像控制不了它的返回值.代码如下 function createBtn(){ for(var i = 0; i < _this.btn.length; i++){ var btn = document.createElement('span'); btn.id = 'btn_' + i; btn.innerHTML = _this.btn[i]; btn.style.padding = '5px 15px'; btn.st

  • 判断数组是否包含某个元素的js函数实现方法

    判断数组是否包含某个元素的js函数实现方法 Array.prototype.contains = function(obj) { var i = this.length; while (i--) { if (this[i] === obj) { return true; } } return false; } 或 Array.prototype.contains = function(element) { for (var i = 0; i < this.length; i++) { if (t

  • JS函数修改html的元素内容,及修改属性内容的方法

    修改元素内容: <body> <p id="pid">Hello</p> <button onclick="demo()">按钮</button> <script> function demo(){ var nv = document.getElementById("pid"); nv.innerHTML="World"; } </script>

随机推荐