jquery插件锦集【推荐】

本篇的由来是群里面某个朋友提到说：有没有一个倒计时的特效，格式如分钟：秒；由此思考了下，觉得弄几个常用效果的js小插件还是不错的，可以供大家学习和使用，这里我取名为：shenniu.effect.js；希望大家喜欢，多多点赞支持：

. 时钟效果

. 倒计时

. 全选效果

. tab点击切换

. tab鼠标移动切换

. 文本输入搜索

. 几个常用table展示方式插件

. 列表插件shenniu.pager.js

下面一步一个脚印的来分享：

首先，先发个线上测试地址lovexins.com:8081/tpl/effect.html，接着需要引用jquery.js和shenniu.effect.js及shenniu.effect.css，然后咋们一起来看怎么使用和效果图

. 时钟插件代码：

//横向时钟
 HenXiangClock: function (option) {
 var defOption = {
 id: "HenXiangClockId",
 format: "yyy-MM-dd HH:mm:ss", //格式
 setInterNum: 1 * 1000, //js计时器的周期时间，默认1s
 };
 $.extend(defOption, option);
 var clearVal = setInterval(function () {
 var dateTime = new Date();
 var y = dateTime.getFullYear();
 var M = dateTime.getMonth() + 1;
 var d = dateTime.getDate();
 var h = dateTime.getHours();
 var m = dateTime.getMinutes();
 var s = dateTime.getSeconds();
 var sy = y;
 var sM = addZero(M, 10, 0);
 var sd = addZero(d, 10, 0);
 var sh = addZero(h, 10, 0);
 var sm = addZero(m, 10, 0);
 var ss = addZero(s, 10, 0);
 var result = defOption.format.
 replace("yyyy", sy).
 replace("MM", sM).
 replace("dd", sd).
 replace("HH", sh).
 replace("mm", sm).
 replace("ss", ss);
 $("#" + option.id).html(result);
 if (defOption.setInterNum <= 0) { clearInterval(clearVal); }
 }, defOption.setInterNum);
 }

横向时钟

effect.HenXiangClock({ id: "div1_1", format: "yyyy-MM-dd HH:mm:ss" });

文字时钟

effect.HenXiangClock({ id: "div1_2", format: "yyyy年MM月dd日HH时mm分ss秒" });

缩写时钟

　effect.HenXiangClock({ id: "div1_3", format: "HH时mm分ss秒" });
 effect.HenXiangClock({ id: "div1_4", format: "HH:mm:ss" });
 effect.HenXiangClock({ id: "div1_5", format: "yyyy-MM-dd", setInterNum: 0 });

. 倒计时插件代码：

//倒计时
 ReClock: function (option) {
 var defOption = {
 id: "ReClockId",
 h: 0, //时
 m: 0, //分钟
 s: 0, //秒
 format: "HH:mm:ss", //格式
 isAutoZero: true, //数字个位数的时候，是否自动增加0
 setInterNum: 1 * 1000, //js计时器的周期时间，默认1s
 backFun: function () { }
 };
 $.extend(defOption, option);
 var clearVal = setInterval(function () {
 var dateTime = new Date(0, 0, 0, defOption.h, defOption.m, defOption.s, 0);
 if (defOption.s <= 0) {
 if (defOption.m <= 0) {
 if (defOption.h <= 0) {
 $("#" + defOption.id).html("");
 //清除timer
 clearInterval(clearVal);
 //执行回调函数
 defOption.backFun();
 return;
 } else {
 defOption.s = 59;
 defOption.m = 59;
 defOption.h--;
 }
 } else {
 defOption.s = 59;
 defOption.m--;
 }
 }
 var h = dateTime.getHours();
 var m = dateTime.getMinutes();
 var s = dateTime.getSeconds();
 var compareNum = defOption.isAutoZero ? 10 : 0;
 var sh = addZero(h, compareNum, 0);
 var sm = addZero(m, compareNum, 0);
 var ss = addZero(s, compareNum, 0);
 var result = defOption.format.
 replace("HH", sh).
 replace("mm", sm).
 replace("ss", ss);
 $("#" + defOption.id).html(result);
 defOption.s--;
 }, defOption.setInterNum);
 }

时钟倒计时

//倒计时
 effect.ReClock({
 id: "div2_1", m: 1, format: "mm:ss", backFun: function () {
 $("#div2_1").html("结束啦");
 }
 });

提交按钮倒计时

$("#btn2_2").on("click", function () {
 var btnObj = $(this);
 btnObj.attr("disabled", "disabled")
 effect.ReClock({
 id: "div2_2",
 s: 10,
 format: "ss秒后才能重新获取",
 isAutoZero: false,
 backFun: function () {
 btnObj.removeAttr("disabled");
 }
 });
 });

提交按钮倒计时缩写

$("#btn2_3").on("click", function () {
 var btnObj = $(this);
 btnObj.attr("disabled", "disabled")
 effect.ReClock({
 id: "div2_3",
 s: 10,
 format: "ss秒",
 isAutoZero: false,
 backFun: function () {
 btnObj.removeAttr("disabled");
 }
 });
 });

. 全选插件代码：

//全选
 CheckBoxAll: function (option) {
 var defOption = {
 nameAll: "cbAll", //全选项Name
 nameChild: "cb" //子项Name
 };
 $.extend(defOption, option);
 $("input[type='checkbox'][name='" + defOption.nameAll + "']").on("click", function () {
 var isChecked = $(this).is(":checked");
 $("input[type='checkbox'][name='" + defOption.nameChild + "']").prop("checked", isChecked);
 });
 }

 //全选
 effect.CheckBoxAll({
 nameAll: "cbAll", //全选项Name
 nameChild: "cb" //子项Name
 });

. tab切换插件：

//tab切换
 TabPanel: function (option) {
 var defOption = {
 tabShowId: "tabShowId", //tab需要显示在div的Id
 data: [
 { title: "tab1", content: "王小一", url: "" },
 { title: "tab2", content: "", url: "http://121.42.208.152/" },
 { title: "tab3", content: "王小二", url: "" },
 { title: "tab4", content: "王小三", url: "" }
 ],
 isMouseMove: false, //是否鼠标移动切换
 tabParentId: "divTab", //tab按钮父级的id
 tabContentId: "divTabContent" //内容区域父级Id
 };
 $.extend(defOption, option);
 //构造html样式
 var tHtml = [];
 var pHtml = [];
 $.each(defOption.data, function (i, item) {
 if (item.title.length > 0) {
 var labFirst = (i == 0 ? "class=\"checkLabel\"" : "");
 var panelFirst = (i == 0 ? "" : "hide");
 tHtml.push('<label data-panel-val="' + i + '" ' + labFirst + '>' + item.title + '</label>');
 if (item.content.length > 0) {
 var content = item.content;
 pHtml.push('<div data-panel-item="' + i + '" class="' + panelFirst + ' panelContent text-left">' + content + '</div>');
 } else if (item.url.length > 0) {
 pHtml.push('<div data-panel-item="' + i + '" class="' + panelFirst + ' panelContent text-left">');
 pHtml.push(' <iframe src="' + item.url + '" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" style="width: 100%; height: 100%;" id="modalContent">');
 pHtml.push('</div>');
 } else {
 pHtml.push('<div data-panel-item="' + i + '" class="' + panelFirst + ' panelContent text-left"></div>');
 }
 }
 });
 if (tHtml.length <= 0) { return; }
 var tabHtml = [];
 tabHtml.push('<div id="' + defOption.tabParentId + '" class="divTab">');
 tabHtml.push(tHtml.join(''));
 tabHtml.push('</div>');
 tabHtml.push('<div id="' + defOption.tabContentId + '">');
 tabHtml.push(pHtml.join(''));
 tabHtml.push('</div>');
 $("#" + 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点击切换

//tab点击切换
 effect.TabPanel({
 tabShowId: "divShowTab01",
 data: [
 { title: "tab1", content: "最近的工作能力大大提升，<br/>得到赏识，<br/>可是太注重事业和赚钱了，<br/>导致让身体透支，<br/>需要多注意健康，<br/>一日三餐要准时才好。", url: "" },
 { title: "tab2", content: "今日身边的女性友人会是你的贵人，多跟她们接触会得到一些好消息。<br/>另外财运旺盛，只要能抓紧契机，积极行动便能进账丰厚。", url: "" },
 { title: "tab3", content: '很压抑。。。。<img class="img-rounded" alt="128x128" id="imgShow" src="http://121.42.208.152:8080/XS.Web/ImgContentFolder/thunbnail/20161212141115292726.jpg" data-holder-rendered="true" style="width: 260px; height: 260px;box-shadow: 10px 10px 5px grey;">', url: "" },
 { title: "tab4", content: "", url: "http://121.42.208.152/" }
 ]
 });

tab鼠标移动切换

使用代码：

//tab滑动切换
 effect.TabPanel({
 tabShowId: "divShowTab02",
 data: [
 { title: "tab1", content: "1<br />11<br />111<br />1111<br />11111<br />", url: "" },
 { title: "tab2", content: "2<br />22<br />222<br />2222<br />22222<br />", url: "" },
 { title: "tab3", content: "3<br />33<br />333<br />3333<br />33333<br />", url: "" }
 ],
 tabParentId: "divTab01", //tab按钮父级的id
 tabContentId: "divTabContent01", //内容区域父级Id
 isMouseMove: true
 });

. 文本输入搜索

//文本输入搜索
 TxtSearch: function (option) {
 var defOption = {
 name: "txtSearch", //搜索框Name
 size: 5, //显示条数
 data: [
 { text: "我爱您啊", value: "1" },
 { text: "我爱祖国", value: "2" },
 { text: "我爱家人", value: "3" },
 { text: "我喜欢|美女|", value: "4" },
 { text: "我爱钱", value: "5" },
 { text: "我是神牛步行3", value: "6" }
 ],
 showDivId: "div_TxtSearch" //展示内容的divId
 };
 $.extend(defOption, option);
 $("input[name='" + defOption.name + "']").on("keyup", function () {
 var txtObj = $(this);
 var divSearchObj = txtObj.next("div[id='div_TxtSearch']");
 if (divSearchObj) {
 divSearchObj.remove();
 }
 var txtVal = $(this).val();
 if (txtVal.length <= 0) {
 return;
 }
 var dataHtml = [];
 var nSize = 0;
 $.each(defOption.data, function (i, item) {
 if (item.text.indexOf(txtVal) >= 0) {
 dataHtml.push('<li data-val="' + item.value + '" style="padding:1px 3px; cursor: pointer;">' + item.text + '</li>');
 nSize++;
 if (nSize >= defOption.size) {
 return false;
 }
 }
 });
 if (dataHtml.length <= 0) { return; }
 var w = txtObj.css("width");
 var txtHtml = [];
 txtHtml.push('<div id="' + defOption.showDivId + '" style="position: absolute; width: ' + w + '; z-index: 99; background: #fff; border: 1px solid #ccc;margin-top: -1px; overflow:hidden; display: block;">');
 txtHtml.push(' <ul style=" list-style: none;padding:0px 0px">');
 txtHtml.push(dataHtml.join(''));
 txtHtml.push(' </ul>');
 txtHtml.push('</div>');
 $(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", function () {
 $(this).css("background-color", "#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();
 }
 });
 }

//文本下拉搜索
 effect.TxtSearch({
 name: "txtSearch", //搜索框Name
 size: 5,//显示5条
 data: [
 { text: "我爱您啊！", value: "1" },
 { text: "我爱祖国！", value: "2" },
 { text: "我爱家人！", value: "3" },
 { text: "我喜欢|美女|！", value: "4" },
 { text: "我爱钱！", value: "5" },
 { text: "我是神牛步行3！", value: "6" }
 ]
 });

. 几个常用table展示方式插件table.shenniu.js

由于这个table.shenniu.js说明插件已经在前面文章分享过了，在里就不多说了各位可以点击链接看下使用说明

. 列表插件shenniu.pager.js

由于这个shenniu.pager.js说明件已经在前面文章分享过了，在里就不多说了各位可以点击链接看下使用说明

下面给出测试页面调用插件的例子，方便大家直接使用：

# jquery  # 插件  # jQuery validate插件功能与用法详解  # jquery滚动条插件（可以自定义）  # jQuery File Upload文件上传插件使用详解  # jQuery插件扩展实例【添加回调函数】  # jQuery简单自定义图片轮播插件及用法示例  # jQuery 插件封装的方法  # jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解  # jQuery插件实现可输入和自动匹配的下拉框  # jQuery插件ajaxFileUpload异步上传文件  # jQuery旋转插件jqueryrotate用法详解  # 我爱  # 倒计时  # 鼠标  # 几个  # 全选  # 我是  # 过了  # 说了  # 不多  # 计时器  # 在前面  # 线上  # 希望大家  # 才好  # 便能  # 绑定  # 发个  # 回调  # 以供  # 小三 

相关文章： 百度网页制作网站有哪些,谁能告诉我百度网站是怎么联系？  北京制作网站的公司,北京铁路集团官方网站？  微信网站制作公司有哪些,民生银行办理公司开户怎么在微信网页上查询进度？  如何在云服务器上快速搭建个人网站？  建站主机选哪种环境更利于SEO优化？  简单实现Android文件上传  如何零基础在云服务器搭建WordPress站点？  建站之星好吗？新手能否轻松上手建站？  如何快速搭建高效可靠的建站解决方案？  如何快速查询网址的建站时间与历史轨迹？  岳西云建站教程与模板下载_一站式快速建站系统操作指南  香港网站服务器数量如何影响SEO优化效果？  网站制作公司排行榜,抖音怎样做个人官方网站  如何在Tomcat中配置并部署网站项目？  建站之星体验版：智能建站系统+响应式设计，多端适配快速建站  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  建站10G流量真的够用吗？如何应对访问高峰？  如何快速生成橙子建站落地页链接？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  合肥做个网站多少钱,合肥本地有没有比较靠谱的交友平台？  内网网站制作软件,内网的网站如何发布到外网？  在线制作视频网站免费,都有哪些好的动漫网站？  江苏网站制作公司有哪些,江苏书法考级官方网站？  SAX解析器是什么，它与DOM在处理大型XML文件时有何不同？  建站之星北京办公室：智能建站系统与小程序生成方案解析  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  魔方云NAT建站如何实现端口转发？  活动邀请函制作网站有哪些,活动邀请函文案？  潍坊网站制作公司有哪些,潍坊哪家招聘网站好？  如何在Windows服务器上快速搭建网站？  教学论文网站制作软件有哪些,写论文用什么软件 ？  C++如何使用std::optional？（处理可选值）  如何在阿里云虚拟主机上快速搭建个人网站？  建站VPS推荐：2025年高性能服务器配置指南  怀化网站制作公司,怀化新生儿上户网上办理流程？  存储型VPS适合搭建中小型网站吗？  建站主机是什么？如何选择适合的建站主机？  GML (Geography Markup Language)是什么，它如何用XML来表示地理空间信息？  如何在自有机房高效搭建专业网站？  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息？  网站制作难吗安全吗,做一个网站需要多久时间？  c# Task.Yield 的作用是什么 它和Task.Delay(1)有区别吗  黑客如何利用漏洞与弱口令入侵网站服务器？  建站之星后台管理：高效配置与模板优化提升用户体验  如何设计高效校园网站？  官网网站制作腾讯审核要多久,联想路由器newifi官网  如何在IIS中新建站点并解决端口绑定冲突？  如何基于PHP生成高效IDC网络公司建站源码？  nginx修改上传文件大小限制的方法