網上看到了*當的一個頁面，有一個效果蠻喜歡的。
不是css3做的，就是通過js+css+div。
點擊可以查看我網站使用的效果
頁面引用：
<link rel="stylesheet" type="text/css" href="lineborder.css">
<script type="application/javascript" src="lineborder.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
頁面中：
將你需要顯示線性邊框的最外層加一個div，class=”lineborder”
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='jquery.min.js'></script>
<script type="application/javascript" src="lineborder.js"></script>
<style type="text/css" src="lineborder.css" />
<script type="application/javascript">
showLineBorder(".lineborder");//重要
</script>
</head>
<body>
<div class="lineborder">
...將要顯示線性邊框的代碼
</div>
</body>
</html>
js文件：
//定義最外層邊框
var $lineBorderDiv;
var line_border_width;
var line_border_height;
//表格速度
var borderSpeed;
//表格顏色
var borderColor;
//表格寬度
var borderWidth;
/**
* 定義div模板
*/
var div_template = '<div class="border-left"></div> ' +
'<div class="border-bottom"></div> ' +
'<div class="border-top"></div> ' +
'<div class="border-right"></div>';
/**
* 綁定最外層邊框
* @param me 傳入需要綁定的對象
*/
function showLineBorder(me) {
//最外層的div綁定
$lineBorderDiv = $(me);
heightAndWidthListener();
//向指定元素追加div
addBorderDiv();
//設置表格的速度
setAnimateSpeed(borderSpeed);
//設置表格顏色
setBorderColor(borderColor);
//設置表格寬度
setBorderWidth(borderWidth);
//設置表格css
setBorderCss();
}
/**
* 寬度高度監聽器
*/
function heightAndWidthListener() {
$($lineBorderDiv).on("mouseover", function () {
line_border_width = $(this).width();
line_border_height = $(this).height();
})
//顯示錶格的動畫
showBorderAnimate();
}
//設置表格寬度
function setBorderWidth(border_width) {
if (border_width) {
this.borderWidth = border_width;
} else {
this.borderWidth = 5;
}
}
function setAnimateSpeed(borderSpeed) {
if (borderSpeed) {
this.borderSpeed = borderSpeed;
} else {
this.borderSpeed = 1000;
}
}
function setBorderColor(color) {
if (color) {
this.borderColor = color;
} else {
borderColor = "#4D90FE";
}
}
function showBorderAnimate() {
$lineBorderDiv.each(function () {
$(this).hover(function () {
$(this)
.find('.border-left,.border-right')
.stop()
.animate({height: line_border_height + 'px'}, borderSpeed);
$(this)
.find('.border-top,.border-bottom')
.stop()
.animate({width: line_border_width + 'px'}, borderSpeed);
}, function () {
$(this)
.find('.border-left,.border-right')
.stop()
.animate({height: '0'}, borderSpeed);
$(this)
.find('.border-top,.border-bottom')
.stop()
.animate({width: '0'}, borderSpeed);
});
});
}
/**
* 爲border設置css樣式
*/
function setBorderCss() {
$lineBorderDiv.find(".border-left").css({
"background": borderColor,
"width": borderWidth + "px",
"height": "0px"
});
$lineBorderDiv.find(".border-bottom").css({
"background": borderColor,
"width": "0px",
"height": borderWidth + "px"
});
$lineBorderDiv.find(".border-top").css({
"background": borderColor,
"width": "0px",
"height": borderWidth + "px"
});
$lineBorderDiv.find(".border-right").css({
"background": borderColor,
"width": borderWidth + "px",
"height": "0px"
});
}
/**
* 元素末尾增加div
*/
function addBorderDiv() {
$lineBorderDiv.append(div_template);
}css文件：
*{margin: 0;padding: 0;list-style: none;border:0; }
.lineborder{width:100%;height: 100%;margin: 0px auto;position: relative;border: 0px solid #4D90FE;margin-top: 5px}
.lineborder .border-left{position:absolute;left:-1px;bottom: 0;}
.lineborder .border-bottom{position:absolute;left:0;bottom: 0px;}
.lineborder .border-top{position:absolute;right:0;top: 0px;}
.lineborder .border-right{position:absolute;right:-1px;top: 0;}
.lineborder{}
文件下載地址：