画表格斜线vml或div+css
用到的主知识点：
js获得内嵌式css中属性的值
vml画直线
演示地址：
http://www.vkill.net/demo/table_bias/table_bias.html
代码：
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>表格斜线 vml / div+css</title>
<style>
v\:* { Behavior: url(#default#VML) }
</style>
<style type="text/css">
* {
margin:0px;
padding: 0px;
}
body, div {
margin: 0px auto;
lineHeight: 20px;
font-size: 14px;
}
ul, li {
clear: both;
list-style-type: none;
}
.floatl {
float: left;
}
.floatr {
float: right;
}
.clear {
clear: both;
}
div.main {
padding: 20px 0px 0px 20px;
width: 800px;
}
div.title {
text-align: left;
position: relative;
}
div.a {
/*直接修改这里的width和height，事件触发后js会根据这里的定义自动生成斜线*/
width: 60px;
height: 40px;
border: 1px solid #0000ff;
}
</style>
<script>
//获得css中属性的值，来源于网络
function getStyle(el,IE,FF){
var elem=document.getElementById(el)
return navigator.appName=="Microsoft Internet Explorer"?elem.currentStyle[IE]:document.defaultView.getComputedStyle(elem, "").getPropertyValue(FF)
}
//根据div的宽度和高度自定设置斜线的坐标点
function autosetline_vml() {
w=getStyle("title","width","width").replace(/[^0-9]*/g,"")
h=getStyle("title","height","height").replace(/[^0-9]*/g,"")
str = "<v:line from='0,0' to='" + w + "," + h + "' >"
str+= "<v:stroke dashstyle='solit' />"
str+= "</v:line>"
document.getElementById("line").innerHTML=str
}
function autosetline_div() {
w=getStyle("title","width","width").replace(/[^0-9]*/g,"")
h=getStyle("title","height","height").replace(/[^0-9]*/g,"")
var str=""
for (i=0,x=1,y=1 ; i<h ; i++,x+=1,y+=w/h) {
str+="<div style='border:0.3px solid #000000;font-size:0px;height:1px;width:1px;background-color:#000000;position:absolute;top:"+x+"px;left:"+y+"px'></div>"
}
document.getElementById("line").innerHTML=str
}
</script>
</head>
<body>
<div class="main">
<ul>
<li>
<div class="a floatl title" id="title">
<div style="position:absolute; z-index:11; width:100%; height:100%;" id="line">
</div>
<div style="position:absolute; z-index:10; height:100%; width:100%" >
<div class="floatr">成绩</div>
<div class="floatl" style="position:absolute; bottom:0px;">姓名</div>
</div>
</div>
<div class="a floatl"></div>
<div class="a floatl"></div>
<div class="a floatl"></div>
</li>
<li>
<div class="a floatl"></div>
<div class="a floatl"></div>
<div class="a floatl"></div>
<div class="a floatl"></div>
</li>
<li>
<input type="button" onclick="autosetline_vml()" value="vml画线,只适合ie" />
</li>
<li>
<input type="button" onclick="autosetline_div()" value="div+css定位，用很多div模拟一条线,ie firefox opera都适合" />
</li>
</ul>
</div>
</body>
</html>
Last modified by vkill on2008/11/15 09:51
用到的主知识点：
js获得内嵌式css中属性的值
vml画直线
演示地址：
http://www.vkill.net/demo/table_bias/table_bias.html
代码：
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>表格斜线 vml / div+css</title>
<style>
v\:* { Behavior: url(#default#VML) }
</style>
<style type="text/css">
* {
margin:0px;
padding: 0px;
}
body, div {
margin: 0px auto;
lineHeight: 20px;
font-size: 14px;
}
ul, li {
clear: both;
list-style-type: none;
}
.floatl {
float: left;
}
.floatr {
float: right;
}
.clear {
clear: both;
}
div.main {
padding: 20px 0px 0px 20px;
width: 800px;
}
div.title {
text-align: left;
position: relative;
}
div.a {
/*直接修改这里的width和height，事件触发后js会根据这里的定义自动生成斜线*/
width: 60px;
height: 40px;
border: 1px solid #0000ff;
}
</style>
<script>
//获得css中属性的值，来源于网络
function getStyle(el,IE,FF){
var elem=document.getElementById(el)
return navigator.appName=="Microsoft Internet Explorer"?elem.currentStyle[IE]:document.defaultView.getComputedStyle(elem, "").getPropertyValue(FF)
}
//根据div的宽度和高度自定设置斜线的坐标点
function autosetline_vml() {
w=getStyle("title","width","width").replace(/[^0-9]*/g,"")
h=getStyle("title","height","height").replace(/[^0-9]*/g,"")
str = "<v:line from='0,0' to='" + w + "," + h + "' >"
str+= "<v:stroke dashstyle='solit' />"
str+= "</v:line>"
document.getElementById("line").innerHTML=str
}
function autosetline_div() {
w=getStyle("title","width","width").replace(/[^0-9]*/g,"")
h=getStyle("title","height","height").replace(/[^0-9]*/g,"")
var str=""
for (i=0,x=1,y=1 ; i<h ; i++,x+=1,y+=w/h) {
str+="<div style='border:0.3px solid #000000;font-size:0px;height:1px;width:1px;background-color:#000000;position:absolute;top:"+x+"px;left:"+y+"px'></div>"
}
document.getElementById("line").innerHTML=str
}
</script>
</head>
<body>
<div class="main">
<ul>
<li>
<div class="a floatl title" id="title">
<div style="position:absolute; z-index:11; width:100%; height:100%;" id="line">
</div>
<div style="position:absolute; z-index:10; height:100%; width:100%" >
<div class="floatr">成绩</div>
<div class="floatl" style="position:absolute; bottom:0px;">姓名</div>
</div>
</div>
<div class="a floatl"></div>
<div class="a floatl"></div>
<div class="a floatl"></div>
</li>
<li>
<div class="a floatl"></div>
<div class="a floatl"></div>
<div class="a floatl"></div>
<div class="a floatl"></div>
</li>
<li>
<input type="button" onclick="autosetline_vml()" value="vml画线,只适合ie" />
</li>
<li>
<input type="button" onclick="autosetline_div()" value="div+css定位，用很多div模拟一条线,ie firefox opera都适合" />
</li>
</ul>
</div>
</body>
</html>
Last modified by vkill on2008/11/15 09:51
网友评论(0)：
