当前位置: 代码迷 >> Web前端 >> 怎么在网页中画斜线
  详细解决方案

怎么在网页中画斜线

热度:138   发布时间:2012-10-25 10:58:58.0
如何在网页中画斜线
两部分内容,来自两文章。
http://www.dnbcw.com/biancheng/javascript/ksat167485.html
http://www.iwms.net/n426c19.aspx

一、DIV法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#container { width: 200px; height: 100px; border: 1px solid red; position: relative;}
#chart { position: absolute; height: 200px}
</style>
</head>
<body>
<div id="container">
    <div id="chart"></div>
</div>
<script>
void function() {
    var arr = [], T$ = function(id) { return document.getElementById(id); },
        fx = function(t,b,c,d){ return c*t/d + b; }, i = 0;
    for ( ; i < 200; i++) {
        arr.push('<div style="width:1px;height:1px;font-size:0;background-color:#FF0066;position:absolute;left:'+(i - 1)+'px;top:'+(Math.ceil(fx(i, 0, 100, 200)))+'px"><\/div>');
    } 
    T$('chart').innerHTML = arr.join('');
}();
</script>
</body>
</html>


二、VML法
<HTML xmlns:v> 
<HEAD> 
<META http-equiv="Content-Type" content="text/html; Charset=gb2312"> 
<META name="GENERATOR" content="网络程序员伴侣-Lshdic 2002"> 
<TITLE>在表格中划斜线</TITLE> 
<STYLE> 
v\:*{behavior:url(#default#VML);} //这里声明了v作为VML公用变量 
</STYLE> 
</HEAD> 
<BODY> 
<table width=300 height=300 border=1><tr><Td valign=top> 
<v:line strokecolor='red' from='0,0' to='290,290'/> 
</td></tr></table> 
这个必须保存为.htm文件以后运行才能看到效果<p>或着刷新一下本页及可看到<p>这是由于本空白窗口的数据流不能动态刷新的缘故 
</BODY> 
</HTML>

v:line父元素的padding会影响from及to的坐标。

1 楼 xutao5641745 2011-04-25  
VML法    火狐下不支持。。。。IE6下,都支持。
  相关解决方案