自己写的自动生成动态边框的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> ...
随机推荐
- 百部BBC经典纪录片，附地址，需要的请抱走
- 【Java】java基本知识
1.int与Integer的区别 int是基本数据类型,Integer是一个引用数据类型. e.g: int num = 100; // 不是对象 Integer i = 100; // 是对象 // ...
- codeforces D. Pashmak and Parmida's problem
http://codeforces.com/contest/459/problem/D 题意:给你n个数,然后统计多少组(i,j)使得f(1,i,ai)>f(j,n,aj); 思路:先从左往右统 ...
- _CrtSetBreakAlloc简单内存泄漏检测方法，解决Detected memory leaks!问题
我的环境是: XP SP2 . VS2003 最近在一个项目中,程序退出后都出现内存泄漏: Detected memory leaks! Dumping objects -> {98500} n ...
- centos6.5 设置静态ip地址
vim /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 #描述网卡对应的设备别名,例如ifcfg-eth0的文件中它为eth0BOOTPRO ...
- HDU-4972 A simple dynamic programming problem
http://acm.hdu.edu.cn/showproblem.php?pid=4972 ++和+1还是有区别的,不可大意. A simple dynamic programming proble ...
- 二：java语法基础：
1,关键字:其实就是某种语言赋予了特殊含义的单词. 保留字:其实就是还没有赋予特殊含义,但是准备日后要使用过的单词. 2,标示符:其实就是在程序中自定义的名词.比如类名,变量名,函数名.包含 0-9. ...
- DBI接口和DPI接口的区别
1)DBI接口 A,也就是通常所讲的MCU借口,俗称80 system接口.The lcd interface between host processor and LCM device list a ...
- Pick-up sticks - POJ 2653 (线段相交)
题目大意:有一个木棒,按照顺序摆放,求出去上面没有被别的木棍压着的木棍..... 分析:可以维护一个队列,如果木棍没有被压着就入队列,如果判断被压着,就让那个压着的出队列,最后把这个木棍放进队列, ...
- 415. Add Strings
没什么限定的话,先翻转,在一位一位加,记得进位就行了.. public class Solution { public String addStrings(String num1, String nu ...