一些前端效果的实现

lz2017 2021-09-01 原文

选中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;
}