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


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

相关代码

二维码
意见反馈
×
×

注册

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

签到成功!

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

知道了
顺丰彩票 www.743126.com-新星彩江苏快三骗局| www.525362.com-重庆时时彩官方停开| www.988899.cc-江西快三软件下载| www.kz71.com-澳门彩票种类| www.119712.com-全民快三真的假的| www.735544.com-吉祥彩0500cm| www.678148.com-福彩3d定位走势图| www.185.cx-就业时报三d天天彩| www.902727.com-彩票平台代理找谁做| 天地彩www.4tdc.com| www.122377.com-重庆时彩独胆公式| www.619030.com-济南体彩中心在哪| www.784258.com-家彩千禧3d开机号| www.874239.com-夺金三分彩计划| www.950751.com-体彩不败胆码| 幸运彩票www.031566.com| www.le24.com-中彩官网app| www.331243.com-彩神争8有人赚钱吗| www.088677.com-最准全天时时彩计划| www.002324.com-新西兰快三-| www.127513.com-彩虹自助下单平台| www.903203.com-绿和彩-| www.986247.com-福彩4十1奖金多少| www.87997.com-英国彩票怎么买| www.354777.com-怎么买彩票会中大奖| www.881135.com-三d走势图彩吧助手| www.964234.com-彩票加倍是什么意思| www.aj7.cc-快三胆拖怎么中奖| www.qx81.com-代玩快三-| www.06eh.com-浩彩油墨-| www.27208.com-竞彩足球大神推单| www.464627.com-时时彩如何按倍数买| www.568091.com-买彩票要用身份证吗| www.646731.com-足彩14场过滤| www.hq62.com-上海快三技巧口诀| www.596058.com-彩票法律法规赊账| www.689357.com-今年七乐彩开奖结果| www.793666.com-沉迷买彩票-| www.918807.com-易发博彩-| www.984739.com-体育彩票排列3全买| www.008870.com-彩票内部员工揭秘| www.099657.com-7乐彩走势图带连线| www.x09.org-赚钱快方法彩票| www.94bm.com-购彩计划网址| www.3545.me-人人彩票是真是假| www.746381.com-冀彩宝快三-| www.879978.com-福彩销售点转让手续| www.02ar.com-彩虹的七种颜色混合| www.48uz.com-星彩无惨是什么| www.3cv.com-买彩平台哪个安全| www.cp9538.com-旺球彩店app| www.211988.com-彩客网是正规的吗| www.278783.com-鸿彩快三是真的假的| www.62682.cc-9号彩票登录| www.535720.com-什么彩票8位数字| www.666385.com-乐彩国际登录| www.704233.com-福彩3d万能三码| www.653209.com-顶级会员彩票登陆| www.pw71.com-买彩票哪个网站正规| www.2425.net-好彩门户资料大全| www.781147.com-彩票飞鱼走势研究| www.398387.com-彩吧图库蓝精灵| www.783283.com-苏州福彩销量| 500万彩票www.500cd.com| www.45da.com-彩图诗句白小姐祺袍| www.1080.site-今天南风彩36选7| www.16709.com-彩票3d玩法与奖金| www.142600.com-彩8iphone版| www.292028.com-上海时时乐彩票查询| www.398894.com-淮南福彩中心地址| www.519329.cc-360彩票官方网站| www.599873.com-体彩买双色球| www.686072.com-广西彩票中奖| www.792949.com-彩票新快了-| www.450045.cc-梦到棺材该买彩票不| www.564068.com-福彩机器人在哪里买| www.672997.com-三d乐彩论坛| www.788956.com-竞彩的专家的重要性| www.905860.com-亚搏彩票手机版| 易彩网www.99638k.com| www.56wa.com-彩票怎么加盟| www.76373.cc-天吉网福彩论坛| www.5694.vip-江苏快三怎么看和值| www.880238.com-喜乐彩票app下载| www.ag72.cc-网易彩票网彩| www.53296.com-分分彩在线计划软件| www.072086.com-彩票投注站私自吃票| www.139849.com-合法的彩票有哪些| www.234780.com-中国体育彩票竞猜| www.24kz.com-彩宝网3d金码| www.833343.com-手机扫码查彩票| www.969489.com-福彩3d内部绝密| www.dw41.com-彩福彩票是真的吗| www.29fs.com-彩铅画海底世界| www.65789.com-彩票模拟机选软件| www.5827.xyz-开彩票店找哪个部门| www.13678.cc-360足球彩票直播| www.144815.com-福彩3d图库总汇| 天天彩票www.7782o.com| www.139179.com-天天中彩票福利版| 开心彩票www.126730.com| www.553478.com-体彩模拟投注| www.717566.com-福彩真的假的| www.870063.com-江苏快三多少期| www.ap26.com-基诺型彩票规律| www.15az.com-北京娶媳妇彩礼钱| www.2910.org-腾讯分分彩后二挂机| www.39719.cc-爱彩彩票老板是谁| www.030808.com-彩61邀请码-| www.5491.net-双彩网首页走图大全| www.bx52.com-体彩排列三规则| www.163141.com-福彩排列五玩法介绍| www.959317.com-七星彩168-| 5号彩www.535hc.com| www.338346.com-蚂蚁彩票靠谱吗| www.9db.cc-快三三同号最大遗漏| www.731393.com-易彩堂大家千万别玩| www.163081.com-宇宙彩票套路| www.332079.com-彩票999官网| www.422861.com-天际彩票注册| www.870280.com-押大小是什么彩票| www.31vh.com-2017年十大彩宝| www.9ti.cc-微博彩票没有了| www.6678.tv-新杏彩彩票平台| www.ng91.com-皇都彩票网-| www.972194.com-快三在线计划网| www.uq42.com-体彩大乐透开奖公告| www.08733.com-jz33九州彩票| www.370128.com-手机彩膜对手机损害| www.490666.com-淘宝彩票国家允许吗| www.556147.com-体彩和福彩造假| www.618383.cc-最火的彩票平台源码| www.682359.com-足彩交流qq群| www.751459.com-怎样下载陶彩票| www.802446.com-体育彩票站转让出兑| www.863397.com-乐彩客app-| www.917072.com-儿童彩铅画风景图片| www.964655.com-彩票推算大师| 彩皇网www.62500.cc| www.011116.com-彩票手机购买网站| www.76rb.com-彩票里什么叫龙虎| www.25833.cc-福彩快乐十分害人| www.75500.com-99彩票是真的假的| www.657385.com-大通彩票手机板本| www.717337.com-彩铅自学哪本书好| www.773576.com-广西时时彩开奖记录| www.833912.com-日本免税软包好彩| www.896853.com-时时彩包赚软件| www.949763.com-中华彩票李迎| www.986295.com-彩票567app-| www.ax29.com-4十1彩票玩法| www.qw34.com-老重时时彩走势图| www.z14.com-云彩厅最新版| www.42ph.com-彩票店微信封号| www.041.cm-福彩3d云刚说彩| www.2050.org-彩票平台会控制输赢| www.932095.com-海南七星彩去哪买| 幸运彩票www.665010.com| www.078.in-七星彩能不能机选| www.162434.com-100彩票网-| www.72420.com-山东青岛快三| www.158.in-彩票开奖查询任五| www.77395.cc-9号彩票用户登录| www.238053.com-旺旺彩票怎么兑奖|