zoukankan      html  css  js  c++  java
  • 一些前端效果的实现

    选中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="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;
    }
  • 相关阅读:
    String
    Xposed源码编译踩坑实录
    Hello 博客园
    HDU 1430 关系映射 + 打表 .
    HDU 1430 关系映射 + 打表 .
    hdu1043 经典的八数码问题 逆向bfs打表 + 逆序数
    hdu1043 经典的八数码问题 逆向bfs打表 + 逆序数
    hdu 1044 BFS(压缩图)+DFS
    hdu 1044 BFS(压缩图)+DFS
    hdu3338 最大流
  • 原文地址:https://www.cnblogs.com/lz2017/p/10085737.html
Copyright © 2011-2022 走看看