自己寫的自動生成動態(tài)邊框的jquery小插件

2024-04-27 15:01:17

字體：大中小

來源：轉載

供稿：網(wǎng)友

思路就是在元素四周添加<ul>列表，然后周期性地改變它的顏色，實現(xiàn)動態(tài)的效果，不支持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 // 創(chuàng)建一個閉包 5 (function($) { 6     // 插件的定義 7     $.fn.myBorder = function(options) { 8         //創(chuàng)建一些默認值，拓展任何被提供的選項 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"),",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);