视频弹出效果

引用JS
```html
<script src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/js/jquery-1.11.0.js"></script>
```
HTML效果
```html
{volist name="news3" id="vo" offset="2" length='4' key="k"}
   <div {if condition="$k eq 1" }class="layui-col-md5"{/if} {if condition="$k eq 2" }class="layui-col-md7"{/if} >
      <img src="{$vo.pic}">
        <div class="ioc video1 videolist" vpath="{$vo.pic}" ipath="{$vo.url}">
            <i></i>
            <span>{$vo.title}</span>
         </div>
    </div>
{/volist}
```

显示条数 `length`

A链接`{:url('Article/index',array('aid'=>$vo['id']))}`

循环区域`{volist name="news3" id="vo" offset="0" length='2'}{/volist}`

图片调用`{if condition="$vo['pic'] eq ''" }src="{$temp_css}/images/work1.jpg" {else/}src='{$vo.pic}'{/if}`

`{if condition="$vo['pic'] eq ''" }`if判断图片是否为空，如何为空显示默认图片，否则显示上传的图片

`{:url('Article/index',array('aid'=>$vo['id']))}`A标签链接Article/index跳转方法模型 $vo[‘id’]为文章ID

`{$vo.content|delhtml=###|cut_str="100"}` description对应数据表内容，可以替换其他字段，delhtml为去除内容中HTML标签 ，cut_str为显示字数 其他字段详情》》

特殊字段日期调用方式`{$vo.time|date="Y-m-d H:s",###}` Y年 m月 d日 H时 s分 -可以替换其他
`offset`，`length`支持输出查询结果中的部分数据，例如输出其中的第0～2条记录

JS代码
```javascript

function close1(){
        var v = document.getElementById('video');//获取视频节点
        $('.videos').hide();//点击关闭按钮关闭暂停视频
        v.pause();
        $('.videos').html();
    }

</script>
```
CSS效果
```css
.videos{ display:none; border: 1px solid #eee;border-radius:5px; background: #eee;padding: 5px; position:fixed; left:20%; top:5%;  z-index:100; width:60%; height:auto; z-index: 9999;}
.vclose { position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer;z-index: 100;background-color: #00bb00; }
```

速建时代TPCMS管理系统

视频弹出效果