思路就是在元素四周添加<ul>列表，然后周期性地改变它的颜色，实现动态的效果，不支持ie7、ie8
预览链接http://gorey.sinaapp.com/myBorder/border.html
html页面代码
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
display: inline-block;
float: left;
}
.panel{
width: 300px;
height: 200px;
margin: 200px auto;
position: relative;
}
.top_border,.bottom_border,.right_border,.left_border{
position: absolute;
display: inline-block;
}
.top_border{
top:0;
left: 0;
}
.bottom_border{
bottom:0;
right: 0;
} .right_border{
top:0;
right: 0;
}
.left_border{
bottom:0;
left: 0;
}
</style>
</head>
<body>
<div class="panel" id="panel">
</div>
<script src="jquery-1.9.1.js"></script>
<script src="myBorder.js"></script>
<script>
$('#panel').myBorder({
firstColor: '#a3daed',
borderWidth: '5px',
borderHeight: '20px',
borderType: '',
speed:200
});
//如果需要取消边框效果
//$('#panel').myBorder.destroy();
</script>
</body>
</html>
插件代码
/**
* Created by Gorey on 2015/9/9.
*/
// 创建一个闭包
(function($) {
// 插件的定义
$.fn.myBorder = function(options) {
//创建一些默认值，拓展任何被提供的选项
var settings = $.extend({
firstColor: '#ffffff',//默认颜色一
secondColor: '#16b1d0',//默认颜色二
borderWidth: '5px',//组成border的li的宽度
borderHeight: '15px',//组成border的li的高度
speed:200 //颜色变换速度，单位毫秒
}, options);
var border_lenth=parseInt(settings.borderHeight.substring(0,settings.borderHeight.length-2));//组成border的li的长度
var horizontal_length=this.width(),//水平border的长度
vertical_length=this.height(),//垂直border的长度
width=0,
height= 0,
horizontal_space,
vertical_space;
this.append("<div class='top_border'style='width:"+horizontal_length+"px;'><ul style='height:"+settings.borderWidth+" '></ul></div>" +
"<div class='right_border'style='height:"+vertical_length+"px;'><ul style='width:"+settings.borderWidth+" '></ul></div>" +
"<div class='bottom_border'style='width:"+horizontal_length+"px;'><ul style='height:"+settings.borderWidth+" '></ul></div>" +
"<div class='left_border'style='height:"+vertical_length+"px;'><ul style='width:"+settings.borderWidth+" '></ul></div>");
//生成水平的边框
for(var i=0;horizontal_length-width>border_lenth;i++){
if(i%2==0){
addBoder($(".top_border ul"),"append",settings.firstColor,settings.borderHeight,settings.borderWidth);
addBoder($(".bottom_border ul"),"prepend",settings.secondColor,settings.borderHeight,settings.borderWidth);
}else{
addBoder($(".top_border ul"),"append",settings.secondColor,settings.borderHeight,settings.borderWidth);
addBoder($(".bottom_border ul"),"prepend",settings.firstColor,settings.borderHeight,settings.borderWidth);
}
width=width+border_lenth;
}
//生成垂直的边框
for(var j=0;vertical_length-height>border_lenth;j++){
if(j%2==0){
addBoder($(".right_border ul"),"append",settings.secondColor,settings.borderWidth,settings.borderHeight);
addBoder($(".left_border ul"),"prepend",settings.firstColor,settings.borderWidth,settings.borderHeight);
}else{
addBoder($(".right_border ul"),"append",settings.firstColor,settings.borderWidth,settings.borderHeight);
addBoder($(".left_border ul"),"prepend",settings.secondColor,settings.borderWidth,settings.borderHeight);
}
height=height+border_lenth;
}
//填补不足一个li长度的空白
horizontal_space=String(horizontal_length-width)+"px";
vertical_space=String(vertical_length-height)+"px";
addBoder($(".top_border ul"),"append",settings.firstColor,horizontal_space,settings.borderWidth);
addBoder($(".bottom_border ul"),"prepend",settings.secondColor,horizontal_space,settings.borderWidth);
addBoder($(".right_border ul"),"append",settings.firstColor,settings.borderWidth,vertical_space);
addBoder($(".left_border ul"),"prepend",settings.secondColor,settings.borderWidth,vertical_space);
init=setInterval(function () { changeColor(settings)},settings.speed); };
//去掉边框
$.fn.myBorder.destroy = function() {
clearInterval(init);
$(".bottom_border,.left_border,.right_border,.top_border").remove();
};
//添加boder
function addBoder(obj,pend,color,width,height) {
if(pend=="append"){
//alert("append")
return obj.append("<li style='background:"+color+";width:"+width+";height:"+height+";'></li>");
}else if(pend=="prepend"){
//alert("prepend")
return obj.prepend("<li style='background:"+color+";width:"+width+";height:"+height+";'></li>");
}
}
//改变颜色
function changeColor(settings) {
$("li").each(function(){
var bgcolor=$(this).css("background-color");
var firstColor=settings.firstColor.toLowerCase()
var secondColor=settings.secondColor.toLowerCase();
if(rgb2hex(bgcolor)==secondColor){
$(this).css("background-color",firstColor)
}else if(rgb2hex(bgcolor.toLowerCase())==firstColor){
$(this).css("background-color",secondColor)
}
});
}
//将rgb格式的颜色代码转成html格式的
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
} // 闭包结束
})(jQuery);