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

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

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

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

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

使用方法:

1、head引入css文件

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

2、head引入js文件

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

3、body引入HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<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>
jQuery layer图片视频列表弹窗插件

很赞哦!()

站点信息
  • 文章统计:358条
  • QQ 群:扫描加入,开通会员
  • QQ扫描加入,开通会员