【JS】常用效果总结

• ul中的li宽度超过一行显示更多按钮

//更多按钮默认先隐藏，先计算每个li的个数，再计算每个li的宽度（动态获取），最后计算每个li的宽度+右边距30的总宽度，总宽度加起来大于ul的默认宽度就显示更多按钮（宽度超过了一行），写在绑定数据的里面
$(function () {
	var lileng = gyslist.length; //1.获取li的总个数，共20个li
	var gyswidth = $("#supplier").width(); //获取默认的ul宽度是1128px
	var gyslist = $("#supplier li") 
	
  //2.获取li的宽度之和
	var sumWidth =0; 
	for(i = 0; i < gyslist.length; i++){
	  //3.计算宽度之和以后每个li都再加30的右边距，除了最后一个不用加30
	  //如果是最后一个li就不加30的宽：最后一个i，是长度-1，i是0-19总共20个，i等于19的时候就不要加30，else里面不是最后一个li所以要加30
		if( i === ( gyslist.length - 1) ) {
			sumWidth += gyslist.eq(i).outerWidth() ;
		}else{
			sumWidth += gyslist.eq(i).outerWidth() + 30;
		}
	}
	console.log( sumWidth ) //每个li的宽度加右边距之和是1494
	
	//4.每个li的宽度和右边距之和大于ul的宽度就显示更多按钮
	if( sumWidth > gyswidth ){
		$(".dxCon .sl-ext-gd").show();
	}else{
		$(".dxCon .sl-ext-gd").hide();
	}	
})

• 给每一个li后面添加顿号、最后一个li不加顿号
• 多选勾选不能超过3个，超出禁止勾选弹出提示

$('.company li').click(function(){
	$(this).toggleClass('current');
	var num = $(this).parent().children('li.current').length;
	if(num > 3){
		$(this).toggleClass('current');
		alert("超出限制")
	}
})

• 鼠标滑过控制div宽度伸缩

$('.left_menu').hover(function(){
	$(this).stop().animate({width:'345'},"slow");
}, function() {
	$(this).stop().animate({width:'225'},"slow");
})

• 按字符截字

<p style="width:200px;" class="description">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
<style>
p { word-break: break-all; }
</style>

// 简单计算字节长度
String.getBlength = function (str) {
    for (var i = str.length, n = 0; i--; ) {
        n += str.charCodeAt(i) > 255 ? 2 : 1;
    }
    return n;
}
// 按指定字节截取字符串
String.cutByte = function (str, len, endstr) {
    var len = +len,
    endstr = typeof(endstr) == 'undefined' ? "..." : endstr.toString(),
    endstrBl = this.getBlength(endstr);
	//用于二分法查找
    function n2(a) {var n = a / 2 | 0; return (n > 0 ? n : 1)}
    if (!(str + "").length || !len || len <= 0) {
        return "";
    }
    if(len<endstrBl){
        endstr = "";
        endstrBl = 0;
    }
    var lenS = len - endstrBl,
    _lenS = 0,
    _strl = 0;
    while (_strl <= lenS) {
        var _lenS1 = n2(lenS - _strl),
        addn = this.getBlength(str.substr(_lenS, _lenS1));
        if (addn == 0) {return str;}
        _strl += addn
        _lenS += _lenS1
    }
    if(str.length - _lenS > endstrBl || this.getBlength(str.substring(_lenS-1))>endstrBl){
        return str.substr(0, _lenS - 1) + endstr
    }else{
        return str;
    }
}
function wordlimit(cname, wordlength) {
    var cname = document.getElementsByClassName(cname);
    for (var i = 0; i < cname.length; i++) {　
        var text = cname[i].innerHTML;
        // alert(text);
        // 判断字符串字节数是否小于等于wordlength，小于等于就不用截取，直接显示，大于wordlength就截取
        if (String.getBlength(text) <= wordlength) {
            cname[i].innerHTML = text;
        } else {
            // 截取指定长度的字符串
            var result = String.cutByte(text, wordlength, '');
            // alert(result);
            cname[i].innerHTML = result + '...';
        }
    }　　　　　
}
wordlimit('description', 20) //显示10个字

• 点击按钮展开内容，再次点击按钮收起内容（按钮样式也同时改变）
  
  
  

<div class="all">
	<div class="title"><span class="open-icon"></span></div>
	<div class="con">我是内容</div>
</div>
<style>
*{ margin:0; padding:0;}
.all { margin:20px;}
.all .open-icon { background: url(open.png) no-repeat center; width: 19px; height: 20px; -webkit-transition: -webkit-transform .5s linear; transition: -webkit-transform .5s linear; transition: transform .5s linear; transition: transform .5s linear, -webkit-transform .5s linear; -webkit-transform: rotate(0deg); transform: rotate(0deg); cursor: pointer;display: inline-block; vertical-align: middle;margin-top: -3px; margin-left:4px;}
.all .put-icon { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function() {
	$('.title span').click(function() {
        if($('.title span').hasClass('put-icon')){
            $(this).removeClass('put-icon');
        }else{
            $(this).addClass('put-icon');
        }
        $(this).parents('.all').find('.con').slideToggle();
    });
});
</script>

• 部分超链接在新窗口打开

$(document).ready(function() {   
	$("div a").attr("target","_blank");
})

• 点击按钮时，清除元素绑定的事件

$(function(){
	$('.btn').click(function(event) {
		clearTimeout(timer);   //点击按钮清除定时
		$('.touming,.Content').show();
	});
	$('.close').click(function(event) {
		$('.touming,.Content').hide();
	});
	
	//5秒弹窗
	var timer;
	timer = setTimeout(function(){
		$('.touming,.Content').show();
	},5000)
});