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 > |

很赞哦!()
站长推荐

标签云
-
帝国cms按照文章id调用单个文章的使用(1)
领峰国际白色简洁微盘交易微盘二开K线完美(1)
EMC区块链交易S挖矿安全透明化交易平台(1)
USDT跑分源码TRC20协议ERC20(1)
帝国cms高亮显示简单方法(1)
帝国cms高亮显示(1)
帝国cmsjqjs实现当前栏目高亮显示(1)
微信防红小功能非常简单的不行的程序(1)
汇汇通微盘程序源码微盘微股市交易源码输赢(1)
帝国cms多值字段值(1)
多字段值调用方法(1)
帝国cms多值字段内容页调用方法可分开调(1)
修改系统时间(1)
linux以硬件时间为基准(1)
国外linux系统时间跟本地时间不同(1)
带加数据库加视频教程(1)
可以定时发布开奖号码(1)
168kj源码(1)
帝国cms统计显示没有标题图片的文章数量(1)
帝国cms统计显示没有标题图片的文章(1)
猜你喜欢
站点信息
- 文章统计:358条
- QQ 群:扫描加入,开通会员
