自己写的自动生成动态边框的jquery小插件
思路就是在元素四周添加<ul>列表，然后周期性地改变它的颜色，实现动态的效果，不支持ie7、ie8
预览链接http://gorey.sinaapp.com/myBorder/border.html
html页面代码
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <style> 6 *{ 7 margin: 0; 8 padding: 0; 9 } 10 ul li{ 11 list-style: none; 12 display: inline-block; 13 float: left; 14 } 15 .panel{ 16 width: 300px; 17 height: 200px; 18 margin: 200px auto; 19 position: relative; 20 } 21 .top_border,.bottom_border,.right_border,.left_border{ 22 position: absolute; 23 display: inline-block; 24 } 25 .top_border{ 26 top:0; 27 left: 0; 28 } 29 .bottom_border{ 30 bottom:0; 31 right: 0; 32 } 33 34 .right_border{ 35 top:0; 36 right: 0; 37 } 38 .left_border{ 39 bottom:0; 40 left: 0; 41 } 42 </style> 43 </head> 44 <body> 45 <div class="panel" id="panel"> 46 </div> 47 <script src="jquery-1.9.1.js"></script> 48 <script src="myBorder.js"></script> 49 <script> 50 $('#panel').myBorder({ 51 firstColor: '#a3daed', 52 borderWidth: '5px', 53 borderHeight: '20px', 54 borderType: '', 55 speed:200 56 }); 57 //如果需要取消边框效果 58 //$('#panel').myBorder.destroy(); 59 </script> 60 </body> 61 </html>
插件代码
1 /** 2 * Created by Gorey on 2015/9/9. 3 */ 4 // 创建一个闭包 5 (function($) { 6 // 插件的定义 7 $.fn.myBorder = function(options) { 8 //创建一些默认值，拓展任何被提供的选项 9 var settings = $.extend({ 10 firstColor: '#ffffff',//默认颜色一 11 secondColor: '#16b1d0',//默认颜色二 12 borderWidth: '5px',//组成border的li的宽度 13 borderHeight: '15px',//组成border的li的高度 14 speed:200 //颜色变换速度，单位毫秒 15 }, options); 16 var border_lenth=parseInt(settings.borderHeight.substring(0,settings.borderHeight.length-2));//组成border的li的长度 17 var horizontal_length=this.width(),//水平border的长度 18 vertical_length=this.height(),//垂直border的长度 19 width=0, 20 height= 0, 21 horizontal_space, 22 vertical_space; 23 this.append("<div class='top_border'style='width:"+horizontal_length+"px;'><ul style='height:"+settings.borderWidth+" '></ul></div>" + 24 "<div class='right_border'style='height:"+vertical_length+"px;'><ul style='width:"+settings.borderWidth+" '></ul></div>" + 25 "<div class='bottom_border'style='width:"+horizontal_length+"px;'><ul style='height:"+settings.borderWidth+" '></ul></div>" + 26 "<div class='left_border'style='height:"+vertical_length+"px;'><ul style='width:"+settings.borderWidth+" '></ul></div>"); 27 //生成水平的边框 28 for(var i=0;horizontal_length-width>border_lenth;i++){ 29 if(i%2==0){ 30 addBoder($(".top_border ul"),"append",settings.firstColor,settings.borderHeight,settings.borderWidth); 31 addBoder($(".bottom_border ul"),"prepend",settings.secondColor,settings.borderHeight,settings.borderWidth); 32 }else{ 33 addBoder($(".top_border ul"),"append",settings.secondColor,settings.borderHeight,settings.borderWidth); 34 addBoder($(".bottom_border ul"),"prepend",settings.firstColor,settings.borderHeight,settings.borderWidth); 35 } 36 width=width+border_lenth; 37 } 38 //生成垂直的边框 39 for(var j=0;vertical_length-height>border_lenth;j++){ 40 if(j%2==0){ 41 addBoder($(".right_border ul"),"append",settings.secondColor,settings.borderWidth,settings.borderHeight); 42 addBoder($(".left_border ul"),"prepend",settings.firstColor,settings.borderWidth,settings.borderHeight); 43 }else{ 44 addBoder($(".right_border ul"),"append",settings.firstColor,settings.borderWidth,settings.borderHeight); 45 addBoder($(".left_border ul"),"prepend",settings.secondColor,settings.borderWidth,settings.borderHeight); 46 } 47 height=height+border_lenth; 48 } 49 //填补不足一个li长度的空白 50 horizontal_space=String(horizontal_length-width)+"px"; 51 vertical_space=String(vertical_length-height)+"px"; 52 addBoder($(".top_border ul"),"append",settings.firstColor,horizontal_space,settings.borderWidth); 53 addBoder($(".bottom_border ul"),"prepend",settings.secondColor,horizontal_space,settings.borderWidth); 54 addBoder($(".right_border ul"),"append",settings.firstColor,settings.borderWidth,vertical_space); 55 addBoder($(".left_border ul"),"prepend",settings.secondColor,settings.borderWidth,vertical_space); 56 init=setInterval(function () { changeColor(settings)},settings.speed); 57 58 }; 59 //去掉边框 60 $.fn.myBorder.destroy = function() { 61 clearInterval(init); 62 $(".bottom_border,.left_border,.right_border,.top_border").remove(); 63 }; 64 //添加boder 65 function addBoder(obj,pend,color,width,height) { 66 if(pend=="append"){ 67 //alert("append") 68 return obj.append("<li style='background:"+color+";width:"+width+";height:"+height+";'></li>"); 69 }else if(pend=="prepend"){ 70 //alert("prepend") 71 return obj.prepend("<li style='background:"+color+";width:"+width+";height:"+height+";'></li>"); 72 } 73 } 74 //改变颜色 75 function changeColor(settings) { 76 $("li").each(function(){ 77 var bgcolor=$(this).css("background-color"); 78 var firstColor=settings.firstColor.toLowerCase() 79 var secondColor=settings.secondColor.toLowerCase(); 80 if(rgb2hex(bgcolor)==secondColor){ 81 $(this).css("background-color",firstColor) 82 }else if(rgb2hex(bgcolor.toLowerCase())==firstColor){ 83 $(this).css("background-color",secondColor) 84 } 85 }); 86 } 87 //将rgb格式的颜色代码转成html格式的 88 function rgb2hex(rgb) { 89 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 90 function hex(x) { 91 return ("0" + parseInt(x).toString(16)).slice(-2); 92 } 93 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 94 } 95 96 // 闭包结束 97 })(jQuery);
浙公网安备 33010602011771号