/* * 初始化 */ *::after, *::before { box-sizing: border-box; } body { font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB', \5b8b\4f53, sans-serif; background: #fff; } html{ -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 62.5%; } body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, s,a,div { margin: 0; padding: 0; } li { list-style: none; } img { display: inline-block; } em { font-style: normal; } /* a */ .trans{ transiton:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -ms-transition:all 0.3s; } a:focus { outline: none; } a, a:hover { text-decoration: none; } a:visited, a:link { text-decoration: none; } /* 元素i、select、input、textarea、button */ i { vertical-align: middle; } i, label, input[type='checkbox'] { vertical-align: middle; } select { line-height: 24px !important; height: 30px !important; padding: 4px 2px !important; } input { font-size: 14px; display: inline-block; overflow: hidden; height: 30px !important; line-height: 28px !important; padding-left: 5px; vertical-align: middle; color: #333; border: 1px solid #dcdcdc; border-radius: 0; background-color: #fff; } input[type='button'] { height: auto !important; padding: 4px 24px !important; } input[type='checkbox'], input[type='radio'] { height: auto !important; padding: 0 !important; border: none; } .form-control[readonly] { opacity: 1; background-color: #f5f5f5; } textarea { overflow-y: auto; padding: 4px 6px !important; resize: none; transition: border .2s linear 0s, box-shadow .2s linear 0s; color: #333; border: 1px solid #dcdcdc; border-radius: 4px; background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset; } textarea:focus { outline: 0 none; } /*浮动*/ .pull-left{ float: left; } .pull-right{ float: right; } /*清除浮动*/ .clearfix::after, .clearfix::before, .form-group::after, .form-group::before { content: " "; display: table; } .clearfix,.clearfix::after, .form-group,.form-group::after{ clear: both; } /* 公用样式 *================================================================== */ .width1200 { width: 1200px !important; } /* 居中 */ .m-c { margin: 0 auto; } /* 对齐方式 */ .t-c-f { text-align: center !important; } .t-l-f { text-align: left !important; } .t-r-f { text-align: right !important; } /* 省略 */ .el-sl { display: inline-block; overflow: hidden; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; } /* 文字大小 */ .f12 { font-size: 12px; } .f14 { font-size: 14px; } .f16 { font-size: 16px; } .f18 { font-size: 18px; } .f22{ font-size:22px; } .f24{ font-size:24px; } .f28{ font-size:28px; } .b { font-weight: bold; } .b-n { font-weight: normal; } /* 颜色值 * =============== */ .white { color: #fff; } .white-bg { background: #fff; } .dark { color: #000; } .gray333 { color: #333; } .gray333-bg { background: #333; } .gray999 { color: #999; } .gray999-bg { background: #999; } .gray666 { color: #666; } .gray666-bg { background: #666; } /* 图标大全 *==================================== */ .i-all { display: inline-block; background: url(../../img/icon/i_all.png) no-repeat; } /*删除*/ .i-del { width: 13px; height: 15px; background-position: -61px -17px; } .i-del:hover, .i-del.active, .i-del-h { width: 13px; height: 15px; background-position: -55px -33px; } /* *弹窗 */ .c-modalBg { position: fixed; z-index: 10; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); } .c-modalBox { position: fixed; z-index: 12; top: 50%; left: 50%; display: none; /* margin-top: 150px;*/ margin-left: -250px; border-radius: 5px; background: #fff; } .c-modalBox .c-modalBox-title { font-weight: bold; line-height: 48px; width: 100%; height: 48px; color: #333; border-bottom: 1px solid #e8e8e8; border-radius: 5px 5px 0 0; background: #fafafa; } .c-modalBox .c-modalBox-title .i-close { font-size: 36px; font-style: normal; font-weight: lighter; } /* * *tipsBox 提示框 */ .tipsBox{ width:200px; position:fixed; top:25%; left:50%; margin-left:-90px; z-index:999999; } .tipub{ padding: 10px; border-radius:4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; box-shadow:0 0 3px #ddd inset; -webkit-box-shadow: 0 0 3px #ddd inset; } .tipsBox .bgcolok{ background-color:#4AAF33; } .tipsBox .bgcolerror{ background-color:#EB6B62; } .tipsBox .bgcolwarn{ background-color:#F7BA86; } .tipsBox img{ vertical-align: middle; margin-right:5px; margin-top: -4px !important; }
(function($){ //$.fn.extend({}) 对象实例来调用此方法 $("").方法名() $.fn.extend({ /* 剩余输入字数 num:要输入的字数总个数 * eg:$(".length100").getTextLen(100) * $(".length100").getTextLen(1000) * */ getTextLen: function(num) { var _num = num; var timer = null; $(this).on('mouseover', function() { clearInterval(timer); $(this).attr('maxLength', _num); var _this = $(this); timer = setInterval(function() { var thisVal = _this.val(); if (thisVal.length > _num) { thisVal = thisVal.substring(0, _num); _this.val(thisVal); } _this.parent().find('.leng').text(thisVal.length); }, 30); }); $(this).mouseover(); }, }); //$.extend({}) 直接用jQuery类即可引用 $.方法名() $.extend({ /* * *提示框， *目前三个参数 txt：要显示的文本；times：自动关闭的时间（不设置的话默认1500毫秒） status：状态， *eg: $.showTips('请输入文本提示'); $.showTips('提交成功~ 即将进入下一步',1500,1); * */ showTips:function(txt,times,status){ var showHtml = ""; if(txt != ""){ if(status == 1 && status !=undefined){ console.info("1111"); showHtml = '<div class="tipsBox t-c-f white">'+ '<div class="bgcolok tipub"><img src="images/ok.png" alt="OK" />'+txt+'</div>'+ '</div>'; }else if(status == 2){ showHtml = '<div class="tipsBox t-c-f white">'+ '<div class="bgcolerror tipub"><img src="images/error.png" alt="error" />'+txt+'</div>'+ '</div>'; console.info("222"); }else{ showHtml = '<div class="tipsBox t-c-f white">'+ '<div class="bgcolwarn tipub"><img src="images/warn.png" alt="warn" />'+txt+'</div>'+ '</div>'; console.info("other"); } } $("body").prepend(showHtml); if(times == "" || times == undefined){ //默认消失时间 1.5s times = 1500; } setTimeout(function(){ $(".tipsBox").remove(); },times) }, /* * 常用正则 * eg: $.方法名() * */ //验证手机号 }) })(jQuery); /* * Img:要放图片的img元素，onload时传参可用this * maxHeight :img元素的高度，像素（图片框 最大高度） * maxWidth:img元素的宽度，像素（图片框 最大宽度） * eg: <img src="" onload="AutoResizeImage(this,250,300)"/> * */ function AutoResizeImage(Img, maxWidth, maxHeight) { var image = new Image(); //原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响） image.src = Img.src; // 当图片比图片框小时不做任何改变 if (image.width < maxWidth&& image.height < maxHeight) { Img.width = image.width; Img.height = image.height; } else{ //原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放，反之以框的高为标准缩放 if (maxWidth/ maxHeight <= image.width / image.height) { //原图片宽高比例 大于 图片框宽高比例 Img.width = maxWidth; //以框的宽度为标准 Img.height = maxWidth* (image.height / image.width); } else { //原图片宽高比例 小于 图片框宽高比例 Img.width = maxHeight * (image.width / image.height); Img.height = maxHeight ; //以框的高度为标准 } } } /* * 图片比例缩放 * eg: <img src="" onload="scalingImg(this)"/> * */ /*function scalingImg(obj){ var $this = $(obj); var imgWidth=$this.width(); var imgHeight=$this.height(); var parent = $this.parent(); var containerWidth = parent.width(); var containerHeight=parent.height(); var containerRatio = containerWidth / containerHeight; var imgRatio = imgWidth / imgHeight; if (imgRatio > containerRatio) { imgWidth = containerWidth; imgHeight = containerWidth / imgRatio; } else if (imgRatio < containerRatio) { imgHeight = containerHeight; imgWidth = containerHeight * imgRatio; } else { imgWidth = containerWidth; imgHeight = containerHeight; } $this.attr('width',imgWidth); $this.attr('height',imgHeight); }*/ /* * * tab切换 * eg: * */ function setTab(name,cursel,n){ for(i=0;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con"+name+i); if(menu == null || con == null)continue; menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } }
常用的插件：1、弹窗sweetAlert： http://mishengqiang.com/sweetalert/
2、Infinite-Scroll无限滚动加载数据：http://demo.sucaihuo.com/108/
3、图片上传webuploader： http://fex.baidu.com/webuploader/ 和 http://www.jq22.com/jquery-plugins%E4%B8%8A%E4%BC%A0-1-jq
4、分页layui： http://www.layui.com/demo/laypage.html 和 jQuery Pagination分页插件(ZXX)： https://www.zhangxinxu.com/jq/pagination_zh/
5、图片延迟加载： http://www.jq22.com/jquery-info390
............等等等 用到在加随时更新
这些都是很常见很常见的，不为了学习，只是找个地方封存起来，直接方便用，要是对你有帮助，也算是尽了一份力
demo：
git链接：