web页面绘制斜线 -控件新闻-慧都网

web页面绘制斜线

原创|其它|编辑：郝浩|2010-01-26 10:48:43.000|阅读 667 次

概述：在看惯了web的中规中矩的横线和竖线后，偶尔来点斜线将给人一种别致的感觉。先看看斜线的效果

在看惯了web的中规中矩的横线和竖线后，偶尔来点斜线将给人一种别致的感觉。先看看斜线的效果

简简单单的一条斜线给页面增色不少吧，但是在web页面中怎么来绘制呢？说到绘制，可能你已经想到了，就是一个点一点画出来。下面是代码

<script type="text/javascript">
        $().ready(function(){
            function wirteline(o){
                var myHeight=o.parent().height();   //获得高度和宽度
                var myWidth=o.parent().width();      
                var count=myHeight<=myWidth?myHeight:myWidth;
                var divstring="";
                for(var i=0;i<=count;i++)  //循环绘制
                {
                   divstring+="<div class='line' style='top:"+i.toString()+"px;left:"+(myWidth--).toString()+"px;'></div>";
                   //为什么不直接这样呢？
                   //o.append("<div class='line' style='top:"+i.toString()+"px;left:"+(myWidth--).toString()+"px;'></div>");

                }
                o.append(divstring);   //如果像上面那样重复获取对象，会有点慢
            }
            
           wirteline($('.linebox'));
        });
    </script>

基本原理就是一个div一个像素，根据div的位置组成一条斜线。具体代码我就不说了吧，上面有注释。

CSS和HTML：

<style type="text/css">
        #mydiv{ width:900px; height:600px;}
        .linebox{ position:relative;width:100%; height:100%;}
        .line{ background-color:Red; width:1px; height:1px; position:absolute; opacity:0.5}
        .border{ border-top:solid 3px blue; border-left:solid 3px red; height:10px; width:10px;}
    </style>
<div id="mydiv">
<div class="linebox"></div>
</div>

下面是Firebug里的截图：