一些前端效果的实现

选中tr效果

选中tr标签出现一个选中效果，即给选中的tr添加个颜色，并移除其他未选中的tr的颜色效果

<style type="text/css">
    tr.focus{background-color: #eee;cursor: pointer;}
</style>

<script type="text/javascript">
  $('tr').on('click',function(){
      var $tr=$(this);
      $tr.parent().find('tr.focus').toggleClass('focus'); //取消原先选中行
      $tr.toggleClass('focus'); //设定当前选中
  });
</script>

效果：颜色#eee(灰色) ，鼠标设置为手(pointer)的样式

限制字数输入

<!--显示150字的输入-->
<textarea rows="" cols="" style="width:100%;" maxlength="150" 
        onchange="this.value=this.value.substring(0,150)" 
        onkeydown="this.value=this.value.substring(0,150)"
        onkeyup="this.value=this.value.substring(0,150)"></textarea>

页面纵向滚动条

<div style="height:600px;overflow-y: scroll;"></div>

选中span文本改变背景色

/*选中span文本改变背景色*/
span::selection {background: #4CB4E7;color: #fff;}   
span::-moz-selection {background: #4CB4E7;color: #fff;} 

解决滚动条出现,页面发生抖动问题

html {
  overflow-y: scroll;
}
:root {
  overflow-y: auto;
  overflow-x: hidden;
}
:root body {
  position: absolute;
}
body {
  width: 100vw;
  overflow: hidden;
}

 

转载于:https://www.cnblogs.com/lz2017/p/10085737.html