澳门威利斯人_威利斯人娱乐「手机版」

来自 威利斯人娱乐 2019-09-23 01:19 的文章
当前位置: 澳门威利斯人 > 威利斯人娱乐 > 正文

圆角div的实现代码,代码精简的可以实现元素圆

上次在blueidea上看到一个因素圆角的落实格局,可是充足太复杂了。于是就协和写了四个函数,可以将成分自动圆角。 
演示地址: 
不用用在有 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; 
       } 
}

明日促成圆角遍布用图形来决定,这种办法有其亮点(爆发的圆角平滑)。 但同一时间她也须要有契合的图纸,要是要动态的退换div的体裁颜色则某个敬谢不敏。还恐怕有正是用js来促成。
福寿年高后的调用代码 如下

你也许感兴趣的稿子:

  • JS画图(非VML)--兼容IE/FF
  • 用js实现CSS圆角生成更新
  • 用js达成的抽象CSS圆角效果!!
  • 爆炸式的JS圆形浮动菜单特效代码
  • JS完结简单的Canvas画图实例
  • 运用JS画图之点、线、面
  • 动用js画图之圆、弧、扇形

复制代码 代码如下:

var objDiv = getRoundDiv.call(document,"solid 1px yellow","#dddddd")
objDiv.Div.style.width="100px";
objDiv.Content.style.margin="6 6 6 6 "
objDiv.Content.innerText="那是三个圆角div测验"
document.body.appendChild(objDiv.Div);

图片 1
那般就发出了二个圆角div
实现原理:原理其实很简单,在div的top和bottom 加上三条线,用那三条线的比不上长短来发出圆角的成效。

实现进程: 如何兑现那三条线呢。 用<b> 那一个因素,将其入骨 设置为1px 。借使要体现边框则为其加多左边框和左手框。增加好线条现在,将内容div 和那三条线放在八个容器里,那几个容器也是一个div。最后回到一个div类,那一个类放多个属性,一个是容器div,通过这几个容器div能够操纵图形出现的义务和分寸中度等属性。另八脾性质是内容div,通过这一个div能够设置这几个div的从头到尾的经过,margin,字体颜色,背景颜色,字体大小,等属性。

只顾的标题: 调用 getRoundDiv 这几个方法供给传递三个格局上下文。笔者的通晓是格局上下文极其与叁个指针,指向调用方法的指标。为何要用这些点子上下文呢? 比如要在ie的 creatPopup 方法 发生出来的popup文书档案内新建三个圆角div的话,由于popup只可以加载他和睦创办的控件,所以能够将popup对象传递到方式内部,成为艺术上下文指向的对象。 传递上下文的方式有二种function.call(obj,"arg1","arg2") 类似与那样。 另一种是 function.apply(obj,arguments)

详尽代码如下:

复制代码 代码如下:

/**************************************************************************/
/*RoundDiv.js 爆发二个圆角div
调用前需安装函数上下文(上下文是指,要开创div的窗口) 比方 var objDiv = getRoundDiv.call(document,"","#dddddd")
函数参数argBorderStyle: 边框样式,字符串 比如 "1px solid black"
函数参数argBgColor: 背景颜色,字符串 举例 "#ffffff"
现今只帮助边框为1像素 假设超越1像素发生的图片会相比较奇异
譬如不设置边框 则从未边框 能够健康使用
本函数重返的是三个RoundDiv自定义类
固然要设置div的原委请用 obj.Content.innerHtml 或 obj.Content.innerText设置
设若要安装div的惊人请用 obj.Div.style.width obj.Div.style.height设置
*/
/**************************************************************************/
/**************************************************************************/
//获得二个圆角div
function getRoundDiv(argBorderStyle,argBgColor){

    //创立成分
    var divPane =this.createElement("div")
    var divContent =this.createElement("div")
    var divContentMax =this.createElement("div")
    var bTop =this.createElement("b")
    var bBottom =this.createElement("b")
    var bTop1 =this.createElement("b")
    var bTop2 =this.createElement("b")
    var bTop3 =this.createElement("b")
    var bTop4 =this.createElement("b")
    var bBottom1 =this.createElement("b")
    var bBottom2 =this.createElement("b")
    var bBottom3 =this.createElement("b")
    var bBottom4 =this.createElement("b")

    //背景设置
    divPane.style.backgroundColor=argBgColor;
    divContent.style.backgroundColor=argBgColor;
    divContentMax.style.backgroundColor=argBgColor;

    bTop1.style.backgroundColor=argBgColor;
    bTop2.style.backgroundColor=argBgColor;
    bTop3.style.backgroundColor=argBgColor;
    bTop4.style.backgroundColor=argBgColor;
    bBottom1.style.backgroundColor=argBgColor;
    bBottom2.style.backgroundColor=argBgColor;
    bBottom3.style.backgroundColor=argBgColor;
    bBottom4.style.backgroundColor=argBgColor;
    bTop.style.backgroundColor="#ffffff";
    bBottom.style.backgroundColor="#ffffff";

    //样式设置
    bTop.style.overflow="hidden";
    bBottom.style.overflow="hidden";
    bTop1.style.overflow="hidden";
    bTop2.style.overflow="hidden";
    bTop3.style.overflow="hidden";
    bTop4.style.overflow="hidden";
    bBottom1.style.overflow="hidden";
    bBottom2.style.overflow="hidden";
    bBottom3.style.overflow="hidden";
    bBottom4.style.overflow="hidden";

本文由澳门威利斯人发布于威利斯人娱乐,转载请注明出处:圆角div的实现代码,代码精简的可以实现元素圆

关键词: 澳门威利斯人