自己写的自动生成动态边框的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> ...
随机推荐
- [BZOJ 1045] [HAOI2008] 糖果传递
题目链接:BZOJ 1045 Attention:数据范围中 n <= 10^5 ,实际数据范围比这要大,将数组开到 10^6 就没有问题了. 我们先来看一下下面的这个问题. 若 n 个人坐成一 ...
- 监控 DNS 流量，预防安全隐患五大招！
尽管 IT 管理员尽心尽责地监控设备.主机和网络是否存在恶意活动的迹象,却往往出力不讨好.主机入侵检测和端点保护对很多公司来说可能是"必需"的安全措施,但如果要找出 RAT.roo ...
- Unicode(UTF-8, UTF-16)令人混淆的概念
为啥需要Unicode 我们知道计算机其实挺笨的,它只认识0101这样的字符串,当然了我们看这样的01串时肯定会比较头晕的,所以很多时候为了描述简单都用十进制,十六进制,八进制表示.实际上都是等价的, ...
- CAD文件导入AD09
1.首先将CAD图纸倒出为DXF格式的文件. 2.在altium designer 的pcb编辑中点菜单文件--导入,在弹出的对话框中,选择导入文件的类型,选择 DWG,DXF类型.然后确定,再弹出的 ...
- 修改窗口属性（全部都是SetWindowLong设置）
说明: 以下函数对于POPUP窗口有效,对于子窗口好像不行. //最小化按钮有效 ::SetWindowLong(m_hWnd,GWL_STYLE,GetWindowLong(m_hWnd,GWL_S ...
- 【HDOJ】3549 Flow Problem
网络流基础题目,Edmonds_Karp可解. /* 3549 */ #include <iostream> #include <string> #include <ma ...
- 【HDOJ】2782 The Worm Turns
DFS. /* 2782 */ #include <iostream> #include <queue> #include <cstdio> #include &l ...
- 【转】Unity3D NGUI事件 UIEvents
原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 QQ群:[119706192] 本文链接地址: Unity3D NGUI事件 UIEvents UIEvents-事件系统void OnH ...
- java基础（五）
这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...
- asterisk帮助与国内论坛
http://www.in2eps.com/fo-abnf/tk-fo-abnf-http.html www.asteriskguru.com/ http://www.voip-info.org/ h ...