日期:2014-05-16  浏览次数:20535 次

使用JS画直线
作者:chenwei

使用JS画直线:包括水平线与垂直线


function drawhline(from_x,to_x, y)
{
  for(var i=from_x;i<=to_x;i+=10) 
  {
    //设置div的背景
    var $divs = $("<div style='background-color: red;z-index: 2'></div>");
    //设置div的左侧位置
    $divs.css("left",i);
    //设置div的上方位置
    $divs.css("top",y);
    //设置div的高度
    $divs.css("height","5px");
    //设置div的宽度
    $divs.css("width","2px");
    //设置div的排板方式
    $divs.css("position","absolute");
    //把div追加到body上去
    $("body").append($divs);
  }
}

function drawvline(from_y,to_y, x)
{

  for(var i=from_y;i<=to_y;i+=10) 
  {
    var $divs = $("<div style='background-color: red;z-index: 2'></div>");
    $divs.css("left",x);
    $divs.css("top",i);
    $divs.css("height","2px");
    $divs.css("width","5px");
    $divs.css("position","absolute");
    $("body").append($divs);
  }
}