常用的前端JS、CSS控制的便捷效果

最新推荐文章于 2019-09-01 22:42:00 发布

weixin_33901843

最新推荐文章于 2019-09-01 22:42:00 发布

阅读量88

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://my.oschina.net/matol/blog/533568

版权

为什么80%的码农都做不了架构师？>>>

div内容过长自动省略号：

<div class="tits" style="width:900px;">${item.note}</div>

	//自动计算长度，并剔除html元素
	$(".tits").each(function(i) {
	    var leg = 280;
	    $(this).html($(this).text());
    	    var copyThis = $(this.cloneNode(true)).hide().css({
                'position': 'absolute',
                'width': 'auto',
                'overflow': 'visible'
            });	
            $(this).after(copyThis);
            if(copyThis.width()>$(this).width()){
                $(this).html($(this).text().substring(0,leg)+'...');
                copyThis.remove();
            }else{
                copyThis.remove(); //清除复制
                return;
            }
	});

方案二:

.divs{width:200px;white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;}
	
<div class="divs" >阿斯顿发</div>

通用简约Table样式，及隔行换色，鼠标移入行颜色加深：

<table cellspacing="1" cellpadding="0" border="0" bgcolor="#95a5d2" width="1000" id="changecolor1">
</table>

<script language="javascript">
	function senfe(o,a,b,c,d){
		var t=document.getElementById(o).getElementsByTagName("tr");
		for(var i=0;i<t.length;i++){
			t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
		}
	}
	senfe("changecolor1","#f3f8fd","#ffffff","#ADADAD","#f391a9");
</script>

页面内容过长，右下角自动出现top返回到顶端功能：

<div style="width:30px;height:30px;right:5px;top:90%;position:fixed;_position:absolute;_bottom:auto;_margin-top:0px;_top:expression(eval(document.documentElement.scrollTop));"><a href="#" onclick="return false;">TOP</a></div>
</body>