自己写的自动生成动态边框的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> ...
随机推荐
- c# 函数注释 显示换行 ,
格式:<para>………..</para> /// <summary> /// <para>把html中的随机汉字转换为图片 调用如下:</par ...
- poj 2778 DNA Sequence AC自动机
DNA Sequence Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11860 Accepted: 4527 Des ...
- 集群-Session解决方案
在集群中session安全和同步是个最大的问题,下面是收集到的几种session同步的方案,希望能通过分析其各自的优劣找出其适应的场景. 1. 客户端cookie加密 简单,高效.比较好的方法是自己采 ...
- c# 函数练习；结构体、枚举类型
* 结构体 1.就是一个自定义的集合,里面可以放各种类型的元素,用法大体跟集合一样. 注意:枚举类型和结构体都属于值类型. 2.定义的方法: struct student { public in ...
- leetcode面试准备:Count Complete Tree Nodes
1 题目 Given a complete binary tree, count the number of nodes. In a complete binary tree every level, ...
- bzoj1297
首先学习是学习矩阵乘法在邻接矩阵的应用ab两点经过k条边的路径数就等于图的邻接矩阵G的k次幂之后G[a,b]的值但这道题问的是经过长度为k的路径数考虑到每条边的长度最长只有9,所以我们把一个点拆成9个 ...
- bzoj2131
首先不难想到对t排序,有f[i]=max(f[j])+v[i] tj<=ti且abs(pi-pj)/2<=ti-tj;要想优化,肯定从优化转移入手先去绝对值,当pi>=pj时,可得2 ...
- DD-WRT相关资源
版本网站下载:Other Downloads,进入betas->2014 FTP下载:如ftp://ftp.dd-wrt.com/betas/2014/06-23-2014-r24461/ Re ...
- 转：昨天去参加adobe AIR发布会
昨天去参加adobe AIR发布会 2008-03-05 12:23 12547人阅读 评论(33) 收藏 举报 adobeairsliverlightwpf微软互联网 首先申明:我不是adobe雇佣 ...
- poj 1321 棋盘问题【dfs】
棋盘问题 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 28308 Accepted: 13996 Descriptio ...