你的位置:首页 > Java教程

[Java教程]自己写的自动生成动态边框的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:20056   });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   //添加boder65   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);