思路就是在元素四周添加<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);

自己写的自动生成动态边框的jquery小插件的更多相关文章

  1. android_demo之自动生成动态表格

    今天我们学习了如何更好的利用Android 的 layout 布局. 接下来是个简单的栗子去了解这个自动生成的动态的控件(自动生成表格) 这是我们的layout 页面 <?xml version ...

  2. ANDROID 自动生成动态表格for

    简单的栗子去了解这个自动生成的动态的控件(自动生成表格) /cs-Layout/res/layout/activity_main.xml <LinearLayout xmlns:android= ...

  3. java_model_dao_自动生成_generator-mybatis-generator-1.3.2 基于maven插件

    用mybatis原因很简单,易用,性能.是介于jdbc和hibernate之间的一个完美方案. 很简单: 1:配置pom <project xmlns="http://maven.ap ...

  4. C# 写的一个生成随机汉语名字的小程序

    最近因为要做数据库相关的测试,频繁使用到测试数据,手动添加太过于麻烦,而且复用性太差,因此干脆花了点时间写了一个生成随机姓名和相关数据的类,贴在这里,有需用的同志们可以参考一下.代码本身质量不好,也不 ...

  5. [转]用Python做一个自动生成读表代码的小脚本

    写在开始(本片文章不是写给小白的,至少你应该知道一些常识!) 大家在Unity开发中,肯定会把一些数据放到配置文件中,尤其是大一点的项目,每次开发一个新功能的时候,都要重复的写那些读表代码.非常烦.来 ...

  6. 设计一个自动生成棋盘格子的JS小程序

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 自动生成getter,setter方法的插件lombok

    1.在InteiliJ IDEA上安装lombok插件,并重启 . 2.在pom.xml文件中添加依赖 <dependency>    <groupId>org.project ...

  8. JavaScript自动生成博文目录导航

    转载于:JavaScript自动生成博文目录导航 我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到 具体的内容 ...

  9. 自动生成查找组件的lua代码

    本篇主要解决的问题是使用lua脚本编写unity业务逻辑时,自动生成一些查找组件及绑定控件事件的lua代码! 现在很多unity项目都是用ulua作为热更新解决方案,因此需要用lua来写相关的逻辑,经 ...

随机推荐

  1. [HTML/JS] JQuery 页面滚动回到顶部

    HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...

  2. 修改win7登录界面

    只需两步,教你将喜欢的图片在设置成开机画面.   第一步,打开注册表,Win+R->运行->Regedit.依次展开,HKEY_LOCAL_MACHINE\SOFTWARE\Microso ...

  3. .net 小技巧

    简单提示效果: <input runat="server" type="text" id="SelPerson" value=&quo ...

  4. Redis数据持久化之RDB持久化

    因为Redis服务器将数据存储在内存里面,而一旦服务器被关闭或者运行服务器的主机本身被关闭的话,存储在内存里面的数据就会消失不见: 如果我们仅仅是将redis用作缓存的话,那么这种数据丢失带来的问题并 ...

  5. Fiddler抓包工具的使用

    下载 自行去官网下载 http://www.telerik.com/fiddler 配置Fiddler 1.打开Fiddler, Tools-> Fiddler Options -> HT ...

  6. redis学习(4)redis安装部署

    下载redis-1.2.6.tar.gz 将下载包拷贝到/usr/local/webserver/redis-1.2.6/下 2.安装 tar -zxvf redis-1.2.6.tar.gz ce ...

  7. (转)C#与Java的证书密钥转换

    前言 最近由于项目需求,服务端由c#编写,客户端由java编写.通信数据使用RSA非对称加密.但是java和c#生成的密钥格式是不一样的,所以需要转换格式才可以正常使用.网上搜到使用java进行格式转 ...

  8. sublime text3的配置(整理)

    一.代码片段 开发人员很多时候是在做一些重复的工作. 针对不同数据表的增删改查都差不多,重复来重去的.很久不写程序了,利用十一假期在家看看书,写写程序. 最近一直很喜欢使用Sublime Text,发 ...

  9. .NET中操作SQLite

    C#操作SQLite Database C#下SQLite操作驱动dll下载:System.Data.SQLite C#使用SQLite步骤: (1)新建一个project (2)添加SQLite操作 ...

  10. Xcode7下载地址

    XCode 7 7.3.1:https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_7.3. ...