QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 提示框/浮动层/弹出层 > jQuery layer图片视频列表弹窗插件

原创商用 jQuery layer图片视频列表弹窗插件

jquery基于layer弹窗插件制作图片视频列表布局,点击视频弹窗播放效果代码。div css js 清晰,均有备注,方便使用,下载即可使用,
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

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.aliyake.com.cn/'>
					<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.aliyake.com.cn/'>
						<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.aliyake.com.cn/'>
						<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> 


[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
百盈PK10 www.644462.com-彩9是什么-| www.578447.com-顺德体育彩票| www.698546.com-浙江省阳光福彩征召| www.tr43.com-台北快三正规吗| 发彩www.50732s.com| www.195476.com-河南省快三走势图一| www.362565.com-雨后彩虹形成的原因| www.568616.com-正规安全彩票平台| www.815649.com-福彩3d表格大全| www.i40.site-福彩3d实战宝典| www.195.xyz-王者彩票一首页| www.618032.com-体彩三有返奖吗| www.vh22.com-上海福彩网官网网页| www.874268.com-分分彩个位必中规律| www.jr45.com-彩神1x-| www.394618.com-江苏体彩兑奖地址| www.602307.com-别人彩票中奖我领了| www.897363.com-江南彩姐的彩票专栏| www.ui47.com-任九十四场胜负彩| www.654970.com-霓虹焕彩-| www.797397.com-99玩彩票app| www.333239.com-中彩网客户端| www.cu05.com-网上彩票靠谱的平台| www.m81.net-中国福彩快乐12| www.61650.com-飞天彩票app| www.st00.com-铁公鸡彩票奖表| www.2645.vip-陕西最近彩票大奖| www.459796.com-彩票是个坑-| www.645362.com-买足彩心得-| www.cw2.cc-pc福彩是什么意思| www.666908.cc-国乐彩邀请码| www.794613.com-重庆时时彩牛牛开奖| www.919290.com-时时彩排行-| www.sc8.com-快乐彩票三-| www.38ou.com-彩铅玫瑰排线技巧| www.3743.vip-彩迷官方下载| www.34617.com-大发七天彩邀请码| www.825582.com-黑龙江省快三| www.792873.com-彩票异地中奖怎么办| www.869950.com-福彩pk10怎么玩| www.42iq.com-彩票上亿大奖| www.774911.com-快三如何买比较好| www.910607.com-约彩彩票电脑版| 500彩票www.3126a.com| www.142599.com-m5彩票平台注册| www.755383.com-福彩3d金牛送胆图| www.112993.com-博友彩五分快三兼职| www.310114.com-万州体育彩票中心| www.5670.wang-大马4d万能彩票| www.72600.com-7m精彩视频-| www.9115.com-福彩神牛首页| www.1222.top-全民双色球彩票| www.20218.cc-彩票人为控号| www.ps83.com-美女五分彩是骗局| www.53gx.com-彩票一等奖号码| www.76141.com-网上能不能买彩票| www.545057.com-福彩丹东全图| www.793515.com-中彩票以后的生活| www.950884.com-5分时时彩计划软件| www.ur96.com-快三大小有规律吗| www.53167.cc-河北福彩排列五走势| www.077789.com-旺彩平台11选5| www.221505.com-安徽快三一定牛预| www.479709.com-极速赛车彩票看透器| www.088926.com-彩吧图谜第一版| www.384975.com-3726澳发彩票网| www.751178.com-今期四不象彩图| www.906899.com-百乐门极速快三| www.oq88.com-彩票是最大的骗局| www.3739.org-海南七星彩研究论坛| www.210151.com-伯爵彩票app| www.h27.net-乐彩排三论坛| www.85mv.com-中国足彩馆冰冰原创| www.878972.cc-福利彩票几位数选| www.764767.com-彩48下载-| www.622183.com-六禾彩开奖记录| www.46593.com-韩国彩票怎么玩法| www.089050.com-吉林快三官网电话| www.222473.com-手机购彩哪个安全| www.322595.com-竞彩中奖单-| www.496202.com-足彩外围推荐| www.588228.com-彩威cvwcc-| www.690315.com-彩票中1个多少钱| www.799779.com-今天福彩票开奖| www.932018.com-七星彩容易中大奖吗| www.aa.cc-湖北快三昨天没出号| www.wz38.cc-福彩3地走势图综合| www.85rm.com-竞猜足彩23期推荐| www.8620.vip-彩票电视频道| www.41277.com-彩票挂机网-| www.625638.com-彩票怎么扫码中宝马| www.84mv.com-任峰北控国彩| www.ri98.com-分分快三是假的吗| www.2021.org-凯发彩票app| www.365259.cc-福彩3d胆玩法介绍| www.998878.cc-美国纽约快三查询| www.91230.com-日景彩烟花价格| www.798914.com-竞彩足球胜平澳客网| www.zz49.cc-体彩店怎么开| www.80499.cc-邯郸银行人员买彩票| www.387553.com-如何下载87彩店| www.796749.com-竞彩任九什么意思| www.cw63.com-胜利彩票怎么样| www.695103.com-彩票哪个软件| www.7885.in-玩时时彩的个人经验| www.kr02.com-上海福彩app下载| www.954012.com-体育彩票软件可靠吗| www.026776.com-8k彩票-| www.226769.com-快捷彩票-| www.73871.com-世界杯彩票如何购买| www.069063.com-信博彩票平台可靠吗| www.v45.net-彩16官网安卓下载| www.523013.com-七彩乐居家政公司| www.551699.com-福利彩票周即可以买| www.235242.com-山东彩友沙龙论| www.298171.com-七星彩今晚开奖吗| www.365696.cc-今天体彩p3中奖号| www.028000.com-全国彩礼排行榜| www.103187.com-七乐彩中奖规则奖金| www.601714.com-以买彩票为生| www.6326.gg-彩彩乐-| www.694404.com-运盛彩票真的假的| www.217794.com-自助售彩机的骗局| www.799113.com-亚洲彩票大发快3| www.6573.org-全中彩票安卓版下载| www.84gy.com-伯乐彩票平台骗人| www.737083.com-网易彩票客户端叫啥| www.123429.com-新昌双彩后王泥石流| www.169308.com-广西快三走势图今天| www.517302.com-蚌埠体彩中心地址| www.145927.com-益盈彩票app下载| www.157024.com-英国5分彩下载| www.672663.com-七星彩晴予预测号码| www.5737.wang-失控的黑彩刘雪龙| www.4649.cn-停止买彩票-| www.858043.com-动物彩票技巧| www.936937.com-七乐彩胆拖兑奖表| www.980714.com-彩票分析软件选号器| www.aj7.cc-快三胆拖怎么中奖| www.982431.com-快三怎么买才能挣钱| www.cp873.com-中国第一快3彩票网| www.015385.com-聚丰5707彩票| www.097225.com-福彩基金用途范围广| www.35544.com-彩民红心水高手论坛| www.186192.com-快三跨度怎么看精确| www.258298.com-彩吧app在哪里下| www.152837.com-彩吧vip官网| www.cp670.com-网上的快三能玩吗| www.39985.cc-今日彩靠谱吗| www.29kn.com-湖南福彩动物| www.0543.date-657彩票什么网站| www.5gn.com-竞彩足球交税规则| www.186599.com-彩票改20分钟一期| www.256581.com-玩官方彩-| www.326393.com-彩宝双色球下期预测| www.397966.com-信傅彩票-| www.504879.com-人生没有彩排演讲| www.577166.com-55彩票下载地址| www.646331.com-研究彩票高人| www.700297.com-辽宁福利彩票真的吗| www.764167.com-投彩网app下载| www.830908.com-快乐彩玩法技巧大全| www.897483.com-体彩足球竞彩玩法串| www.964674.com-足球彩票十四场开奖|