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

很赞哦!()
站长推荐

标签云
-
A1579【全民养狗运营版】陀螺国际AP(1)
A1731GEC挖矿区块挖矿机系统+UI(1)
新版两融双融3.0新股申购股票交易股票配(1)
A1176PHPBTC合约余额宝理财化钱(1)
A1235仿火币模式交易所源码+VUE源(1)
A1346二开GFCH5伪微交易理财盘最(1)
A1531学习培训专用型5G投资理财产品(1)
A1362二开投资理财股票基金源码支持公(1)
A1414战机舰艇全新UI区块链投资源码(1)
A1467猫力币区块链多币种量化钱包+新(1)
A1488基金定投源码-理财程序数字币货(1)
A1513华夏基金理财程序独一无二的功能(1)
JI卫云域名防红防封系统最新版源码免授权(1)
wordpress网址导航主题模板自适应(1)
帝国cms按照文章id调用单个文章的使用(1)
领峰国际白色简洁微盘交易微盘二开K线完美(1)
EMC区块链交易S挖矿安全透明化交易平台(1)
USDT跑分源码TRC20协议ERC20(1)
帝国cms高亮显示简单方法(1)
帝国cms高亮显示(1)
猜你喜欢
站点信息
- 文章统计:372条
- QQ 群:扫描加入,开通会员
