常用方法

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 }

 

posted @ 2017-10-24 11:03  正在注销  阅读(213)  评论(0编辑  收藏  举报