前端一些常见效果的实现总结

1 、垂直居中效果
具体查看:http://www.jianshu.com/writer#/notebooks/1470914/notes/13795535
2、多行文本溢出时自动显示省略号在夸浏览器时的解决方案.
在开发中单行文本溢出显示省略号很简单,但是多行文本溢出也是比较常见的,在解决时时常会遇到夸浏览器不兼容的问题,最近找到了两个比较好用的插件,在这里分享下:
两个插件的地址:
https://github.com/josephschmitt/Clamp.js
https://github.com/FrDH/jQuery.dotdotdot
2.1 Clamp.js的使用方法特别简单,甚至不需要jquery等依赖库.
参数: clamp (Number | String | 'auto').

        var element= document.getElementById('clampjs');
        $clamp(element, {clamp: 3}); //可以直接定义显示的行数,溢出部
                                                                  分会自动添加...
        $clamp(element, {clamp: '65px'}); ////可以直接定义元素的高度,插件自动计算可以显示多少行,溢出部分会自动添加...
       $clamp(ps, {clamp: 'auto'});    //也可设置auto,这时标签元素要设置高度

2.2 dotdotdot的使用方法,需要依赖于jquery
先引用必须的依赖库:

    <script type="text/javascript" language="javascript" 
    src="src/jquery.dotdotdot.min.js"></script>

使用也很简单

 <script>
        $(function(){
            $('.test1').dotdotdot({
                // ellipsis: "\u2026 ",
                after: 'a',   //可以在省略号后面添加一些如'read more'等的提示语.
                // watch: 'window'
                // wrap: 'letter'
            });
            $('.test2').dotdotdot();
        })
    </script>

这个插件在英文状态很好用,但在中文状态有时不显示内容,知道怎么解决的朋友希望可以告诉我
3、img标签根据父div等比例缩放不变形.
在开发中进行列表或图文布局时,经常会遇到图片需要根据父div的缩放自动等比例自动缩放而不变形,我们可以根据媒体查询在不同的尺寸下给图片设置合适的尺寸,但是这样太繁琐,并且如果宽高的尺寸和原始图片尺寸相差很大的话很容易造成图片失真的现象,先总结两种方法可以自动根据父div的缩放进行等比例缩放.
3.1

      .parent-box{ // 对图片盒子设置 overflow: hidden;,不需要固定宽高
            overflow: hidden;
        }

       .parent-box img{ // 对图片进行如下设置,
            max-width: 100%;
            max-height: 100%;
        }

这样设置之后,图片就可以自动压缩而不会失真了.在进行响应式布局时也同样适合.
3.2 使用div的 background属性设置背景图片并配合padding-top来解决
style部分

        .img-box-1{max-width: 1024px;}
        .img-content{
            padding-top:30.85%; /* 316 / 1024 padding-top为图片的（高度 / 宽度 ）* 100% */
            background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
            background-size:cover;
            background-position:center;
        }

html部分

        <div class="img-box-1">
           <div class="img-content"></div>
        </div>

实现的基本原理：将使用到保持元素的宽高比的技巧，为元素添加垂直方向的padding-top的值，使用百分比的形式，这个值是相对于元素的宽而定的，比如我上面的一张图片的宽度是1024px，高度为316px；那么现在的padding-top = （高度 / 宽度 ）＊ 100% ＝ （316 ／ 1024）＊ 100% ＝ 30.85%;

但是仅仅对图片高度和宽度缩放的放还不够，我门还必须添加 background-size:cover, 使这个属性让背景铺满元素的，但是IE8及以下不支持该属性，因此为了兼容IE下面的浏览器，我门还需要再加一个属性 background-position: center ; 同时我门也要保证 图片的宽度最大等于父容器的宽度；因此下面的HTML代码

知识点参考:http://www.cnblogs.com/tugenhua0707/p/5260411.html

4、div横向超出一定宽度之后可以横向滑动

父div：

.father-div{
  width: 1920px;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

子div：

.children-div{
  width: 384px;
  height: 216px;
  display: inline-block;
}

5、视频播放