您现在的位置是：网站首页ν网页特效网页特效

jQuery layer图片视频列表弹窗插件

YLM 2021-11-06 16:26:25 【收藏】浏览地址已载()次【加QQ群620332298】编号:2021110628560

简介jQueylaye图片视频列表弹窗插件jquey基于laye弹窗插件制作图片视频列表布局，点击视频弹窗播放效果代码。divcssjs清晰，均有备注，方便使用，下载即可使用"

jquery基于layer弹窗插件制作图片视频列表布局，点击视频弹窗播放效果代码。div css js 清晰，均有备注，方便使用，下载即可使用

使用方法：

1、head引入css文件

	
			<link href="css/style.css" rel="stylesheet" type="text/css" />

2、head引入js文件

	
			<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>

3、body引入HTML代码

	
			
			<div class="video">
    <div class="container">
        <div class="index-title">
            <h2>观看视频介绍</h2>
            <a href="#">全部视频</a>
        </div>
        <div class="video-wrap">
            <div class="vr-big">
                <div class="inner" data-iframe='http://www.17sucai.com/'>
                    <img src="images/large-001.jpg" alt="">
                    <i class="play"></i>
                    <div class="text">
                        <h3>新零售视频介绍</h3>
                        <p>通过视频介绍，你将更加深入了解什么是新零售</p>
                    </div>
                </div>
                <a href="#" class="link">了解详情</a>
            </div>
            <div class="vr-right">
                <div class="vr-small">
                    <div class="inner" data-iframe='http://www.17sucai.com/'>
                        <img src="images/large-002.jpg" alt="">
                        <i class="play"></i>
                        <span class="text">到家视频介绍</span>
                    </div>
                    <a href="#" class="link"></a>
                </div>
                <div class="vr-small">
                    <div class="inner" data-iframe='http://www.17sucai.com/'>
                        <img src="images/large-003.jpg" alt="">
                        <i class="play"></i>
                        <span class="text">收银台视频介绍</span>
                    </div>
                    <a href="#" class="link"></a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<script type="text/javascript">
$(".video").on("click",".inner",function(){
    var $this = $(this);
    var video = $this.attr("data-iframe");
    layer.open({
      type: 2,
      title: false,
      closeBtn: 1, //不显示关闭按钮
      shade: 0.3,
      skin: 'layer-alert-video',
      area: ['900px', '563px'],
      anim: 0,
      content: [video, 'no'] //iframe的url，no代表不显示滚动条
    });
});
</script> 

		