网上看到了*当的一个页面,有一个效果蛮喜欢的。
不是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{}
文件下载地址: