本篇的由来是群里面某个朋友提到说：有没有一个倒计时的特效，格式如分钟：秒；由此思考了下，觉得弄几个常用效果的js小插件还是不错的，可以供大家学习和使用，这里我取名为：shenniu.effect.js；希望大家喜欢，多多点赞支持：
. 时钟效果
. 倒计时
. 全选效果
. tab点击切换
. tab鼠标移动切换
. 文本输入搜索
. 几个常用table展示方式插件
. 列表插件shenniu.pager.js
下面一步一个脚印的来分享：
首先，先发个线上测试地址lovexins.com:8081/tpl/effect.html，接着需要引用和及，然后咋们一起来看怎么使用和效果图
. 时钟插件代码：
横向时钟
effect.HenXiangClock({ id: "div1_1",format: "yyyy-MM-dd HH:mm:ss" });
文字时钟
effect.HenXiangClock({ id: "div1_2",format: "yyyy年MM月dd日HH时mm分ss秒" });
缩写时钟
. 倒计时插件代码：
时钟倒计时
提交按钮倒计时
提交按钮倒计时缩写
. 全选插件代码：
. tab切换插件：
0) {
var labFirst = (i == 0 ? "class=\"checkLabel\"" : "");
var panelFirst = (i == 0 ? "" : "hide");
tHtml.push('');
if (item.content.length > 0) {
var content = item.content;
pHtml.push('
');
} else if (item.url.length > 0) {
pHtml.push('
');
} else {
pHtml.push('
');
}
}
});
if (tHtml.length <= 0) { return; }
var tabHtml = [];
tabHtml.push('
111
1111
11111
",content: "2
22
222
2222
22222
",content: "3
33
333
3333
33333
",tabParentId: "divTab01",//tab按钮父级的id tabContentId: "divTabContent01",//内容区域父级Id isMouseMove: true });
');
tabHtml.push('
可是太注重事业和赚钱了，
导致让身体透支，
需要多注意健康，
一日三餐要准时才好。",content: "今日身边的女性友人会是你的贵人，多跟她们接触会得到一些好消息。
另外财运旺盛，只要能抓紧契机，积极行动便能进账丰厚。",content: '很压抑。。。。
');
$("#" + defOption.tabShowId).html(tabHtml.join(''));
var tabParnetObj = $("#" + defOption.tabParentId);
var tabContentObj = $("#" + defOption.tabContentId);
tabParnetObj.find("label[data-panel-val]").on(defOption.isMouseMove ? "mouseover" : "click",function () {
//对应值
var panelVal = $(this).attr("data-panel-val");
//tab按钮
tabParnetObj.find("label[data-panel-val]").removeClass("checkLabel");
$(this).addClass("checkLabel");
//必须div承载内容
tabContentObj.find("div[data-panel-item]").addClass("hide"); //全部隐藏
tabContentObj.find("div[data-panel-item='" + panelVal + "']").removeClass("hide"); //选中展示
});
}
tab点击切换
得到赏识，可是太注重事业和赚钱了，
导致让身体透支，
需要多注意健康，
一日三餐要准时才好。",content: "今日身边的女性友人会是你的贵人，多跟她们接触会得到一些好消息。
另外财运旺盛，只要能抓紧契机，积极行动便能进账丰厚。",content: '很压抑。。。。
tab鼠标移动切换
使用代码：
11111
1111
11111
",content: "2
22
222
2222
22222
",content: "3
33
333
3333
33333
",tabParentId: "divTab01",//tab按钮父级的id tabContentId: "divTabContent01",//内容区域父级Id isMouseMove: true });
.
文本输入搜索
= 0) {
dataHtml.push('');
nSize++;
if (nSize >= defOption.size) {
return false;
}
}
});
if (dataHtml.length <= 0) { return; }
var w = txtObj.css("width");
var txtHtml = [];
txtHtml.push('
');
txtHtml.push('
');
$(this).after(txtHtml.join(''));
//重新获取对象
divSearchObj = txtObj.next("div[id='div_TxtSearch']");
//选中项事件
var liObj = $("div[id='" + defOption.showDivId + "']").find("ul li");
//鼠标移上去
liObj.on("mouseover",function () {
$(this).css("background-color","#efecec");
});
liObj.on("mouseout","#fff");
});
//选中
liObj.on("click",function () {
var liVal = $(this).attr("data-val");
var liText = $(this).html();
txtObj.val(liText);
});
});
//绑定焦点事件
$("input[name='" + defOption.name + "']").on("focus",function () {
$("div[id='" + defOption.showDivId + "']").show();
});
//失去焦点
$(document).on("click",function (e) {
var txtObj = $("input[name='" + defOption.name + "']");
var divSearchObj = txtObj.next("div[id='div_TxtSearch']");
var tH = txtObj.prop("outerHTML");
var eH = $(e.target).prop("outerHTML");
if (tH == eH) {
divSearchObj.show();
} else {
divSearchObj.hide();
}
});
}
.
几个常用table展示方式插件
由于这个插件已经在前面文章分享过了，在里就不多说了各位可以点击链接看下使用说明
