自己写的自动生成动态边框的jquery小插件
思路就是在元素四周添加<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小插件的更多相关文章
- 基于注解处理器开发自动生成getter和setter方法的插件
昨天无意中,逛到了lombok的网站,并看到了首页的5分钟视频,视频中的作者只是在实体类中写了几个字段,就可以自动编译为含setter.getter.toString()等方法的class文件.看着挺 ...
- android_demo之自动生成动态表格
今天我们学习了如何更好的利用Android 的 layout 布局. 接下来是个简单的栗子去了解这个自动生成的动态的控件(自动生成表格) 这是我们的layout 页面 <?xml version ...
- ANDROID 自动生成动态表格for
简单的栗子去了解这个自动生成的动态的控件(自动生成表格) /cs-Layout/res/layout/activity_main.xml <LinearLayout xmlns:android= ...
- java_model_dao_自动生成_generator-mybatis-generator-1.3.2 基于maven插件
用mybatis原因很简单,易用,性能.是介于jdbc和hibernate之间的一个完美方案. 很简单: 1:配置pom <project xmlns="http://maven.ap ...
- C# 写的一个生成随机汉语名字的小程序
最近因为要做数据库相关的测试,频繁使用到测试数据,手动添加太过于麻烦,而且复用性太差,因此干脆花了点时间写了一个生成随机姓名和相关数据的类,贴在这里,有需用的同志们可以参考一下.代码本身质量不好,也不 ...
- 用Python写个自动ssh登录远程服务器的小工具
很多时候我们喜欢在自己电脑的终端直接ssh连接Linux服务器,而不喜欢使用那些有UI界面的工具区连接我们的服务器.可是在终端使用ssh我们每次都需要输入账号和密码,这也是一个烦恼,所以我们可以简单的 ...
- python 3 - 写一个自动生成密码文件的程序
1.你输入几,文件里面就给你产生多少条密码 2.密码必须包括,大写字母.小写字母.数字.特殊字符 3.密码不能重复 4.密码都是随机产生的 5.密码长度6-11 import string,rando ...
- [转]用Python做一个自动生成读表代码的小脚本
写在开始(本片文章不是写给小白的,至少你应该知道一些常识!) 大家在Unity开发中,肯定会把一些数据放到配置文件中,尤其是大一点的项目,每次开发一个新功能的时候,都要重复的写那些读表代码.非常烦.来 ...
- 设计一个自动生成棋盘格子的JS小程序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- ORACLE 字符串操作
1 字符串连接 SQL> select 'abc' || 'def' from dual; 'ABC'|------abcdef 2 小写SQL>select lower('ABC01 ...
- uva 10130 SuperSale
一个01背包问题: 刚刚开始把题目看错了,以为物品的数目是有限的,然后让你求一个家庭里最多能够拿多个价值的东西: 这样一来的话,这个题目就有点意思了: 但是后来发现竟然是个简单的01背包问题 = = ...
- asp.net关于Cookie跨域（域名）的问题
Cookie是一个伟大的发明,它允许Web开发者保留他们的用户的登录状态.但是当你的站点有一个以上的域名时就会出现问题了.在Cookie规范上 说,一个cookie只能用于一个域名,不能够发给其它的域 ...
- AVOIR发票的三种作用
1. 开错了发票,应收多写了,应该抵消掉一部分应收2. 客户临时有变化,比如只买一部分产品,取消了另一部分,那么也是开AVOIR抵消了一部分应收3. 退钱给客户的时候,也要开一张AVOIR发票 注意, ...
- android 自定义命名空间
一.统一的用户界面是可以使得应用程序更友好.要做到用户界面的统一,我们就必须用到风格(style)和主题(theme).自定义一个View的方法步骤如下:1.首先,在values文件夹下定义一个att ...
- lc面试准备：Regular Expression Matching
1 题目 Implement regular expression matching with support for '.' and '*'. '.' Matches any single char ...
- ORACLE数据缓冲区DB cache
DB CACHE是以数据块为单位组织的缓冲区,数据库刚刚启动的时候,DB CACHE中几乎没有用户数据的缓冲,当会话访问数据库中的表或索引时,首先会检查DB CACHE中是否存在该数据,如果不存在,就 ...
- wcf客户端捕获异常
直接使用Exception进行捕获,然后在监视器中查看具体是哪一个异常 System.Exception {System.ServiceModel.Security.MessageSecurityEx ...
- 【转】Android Fragment 基本介绍--不错
原文网址:http://www.cnblogs.com/mengdd/archive/2013/01/08/2851368.html Fragment Android是在Android 3.0 (AP ...
- HDOJ 1716 排列2 next_permutation函数
Problem Description Ray又对数字的列产生了兴趣: 现有四张卡片,用这四张卡片能排列出很多不同的4位数,要求按从小到大的顺序输出这些4位数. Input 每组数据占一行,代表四张卡 ...