常用方法
1、设置图片自适应父级
1 function setImg_wh(img) { 2 if (!$(img).hasClass('seted_wh')) { 3 var originalWidth = $(img).width(); 4 var originalHeight = $(img).height(); 5 var parentWidth = $(img).parent().width(); 6 var parentHeight = $(img).parent().height(); 7 var originalScale = originalWidth / originalHeight; 8 var parentScal = parentWidth / parentHeight; 9 var scaleNum, newImgWidth, newImgHeight, changeNum; 10 11 if ($(img).parent().css('position') == 'static') { 12 $(img).parent().css({ 13 'position': 'relative', 14 'overflow': 'hidden' 15 }) 16 } 17 /*如果图片宽高比 大于 父级宽高比*/ 18 if (originalScale > parentScal) { 19 scaleNum = originalHeight / parentHeight; 20 newImgWidth = originalWidth / scaleNum; 21 changeNum = (newImgWidth - parentWidth) / 2; 22 $(img).css({ 23 'width': 'auto', 24 'height': parentHeight, 25 'margin-left': -changeNum 26 }); 27 /*如果图片宽高比 小于 父级宽高比*/ 28 } else if (originalScale < parentScal) { 29 scaleNum = originalWidth / parentWidth; 30 newImgHeight = originalHeight / scaleNum; 31 changeNum = (newImgHeight - parentHeight) / 2; 32 $(img).css({ 33 'width': parentWidth, 34 'height': 'auto', 35 'margin-top': -changeNum 36 }); 37 } else { 38 39 $(img).css({ 40 'width': '100%', 41 'height': '100%' 42 }) 43 } 44 45 $(img).addClass('seted_wh'); 46 } else { 47 console.log('已经处理过了'); 48 } 49 }
2、输入框字符长度限制(汉字+1 其余+0.5)
1 function fnLengthLimit(item, itemStatus, maxLen, minLen, allowMax, isCut) { 2 /*item:要绑定的dom元素 itemStatus:显示输入长度状态dom maxLen:最大限制字数 min:最小限制字数 allowMax:允许输入最多字符(isCut 为true进生效) isCut:是否进行截取(true,false)*/ 3 4 /*获取item初始值*/ 5 fnGetLengthOriginal(item, itemStatus, maxLen, minLen, allowMax, isCut); 6 7 $(item).keyup(function() { 8 fnGetLengthOriginal(item, itemStatus, maxLen, minLen, allowMax, isCut); 9 }); 10 11 function fnGetLengthOriginal(item, itemStatus, maxLen, minLen, allowMax, isCut) { 12 var nItemLength = 0; /*元素相对字符长度*/ 13 var nLenCeilOriginal = 0; /*输入限制长度*/ 14 var sItemValue = $(item).val(); /*元素初始value*/ 15 var nItemlegthOriginal = sItemValue.length; /*元素初始value 长度*/ 16 var nCutIndex = 100000; /*截取字符对应下标*/ 17 var sCuntValue = ''; /*开始字符对应该的值 */ 18 19 /*获取item 相对字符总长度*/ 20 for (let i = 0; i < nItemlegthOriginal; i++) { 21 if ((/[\u4e00-\u9fa5]+/).test(sItemValue[i])) { 22 nItemLength += 1; 23 } else { 24 nItemLength += 0.5; 25 } 26 nLenCeilOriginal = Math.ceil(nItemLength); 27 /*到达截取字符相对应的value值*/ 28 if (nLenCeilOriginal == allowMax) { 29 sCuntValue = sItemValue[i]; 30 } 31 } 32 33 /*设置截取字符下标*/ 34 sCuntValue && sCuntValue != '' ? nCutIndex = sItemValue.lastIndexOf(sCuntValue) : nCutIndex = nCutIndex; 35 36 /*截取字符*/ 37 isCut ? sItemValue = sItemValue.substring(0, nCutIndex) : sItemValue = sItemValue; 38 39 /*输入值在限制之外*/ 40 if (nLenCeilOriginal < minLen || nLenCeilOriginal > maxLen) { 41 itemStatus.css({ 42 'color': '#f00' 43 }); 44 $(itemStatus).attr('data-allow', 'false'); 45 } else { 46 itemStatus.css({ 47 'color': '#ccc' 48 }); 49 $(itemStatus).attr('data-allow', 'true'); 50 } 51 52 $(item).val(sItemValue); 53 $(itemStatus).html(nLenCeilOriginal + '/' + maxLen); 54 return nLenCeilOriginal; 55 } 56 }