Self-written jquery plug-in that automatically generates dynamic borders and automatically generates jquery

Self-written jquery plug-in that automatically generates dynamic borders and automatically generates jquery

The idea is to add the <ul> list around the element and change its color periodically to achieve dynamic results. ie7 and ie8 are not supported.

Preview link http://gorey.sinaapp.com/myBorder/border.html

Html page code

1 <! DOCTYPE html> 2 
Plug-in code
1/** 2 * Created by Gorey on 2015/9/9. 3 */4 // create a closure 5 (function ($) {6 // plug-in definition 7 $. fn. myBorder = function (options) {8 // create some default values to expand any provided options 9 var settings = $. extend ({10 firstColor: '# ffff', // default color: 11 secondColor:' # 16b1d0', // default color: 12 borderWidth: '5px ', // The width of the li that makes up the border 13 borderHeight: '15px ', // The height of the li that makes up the border 14 speed: 200 // The color conversion speed, in milliseconds 15 }, options); 16 var border_lenth = parseInt (settings. borderHeight. substring (0, settings. borderHeight. length-2); // The length of the li that makes up the border 17 var horizontal_length = this. width (), // horizontal border length 18 vertical_length = this. height (), // vertical border length 19 width = height = 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 // generate a horizontal border of 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 // generate the vertical border 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 // fill in a blank 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 // remove the border 60 $. fn. myBorder. destroy = function () {61 clearInterval (init); 62 $ (". bottom_border ,. left_border ,. right_border ,. top_border "). remove (); 63}; 64 // Add the 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 // change color 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 rows (this).css ("background-color", firstColor) 82} else if (rgb2hex (bgcolor. toLowerCase () = firstColor) {83 rows (this).css ("background-color", secondColor) 84} 85 }); 86} 87 // convert the color code in rgb format to 88 function rgb2hex (rgb) in html format {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 // closure end 97}) (jQuery );