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.wzztx.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.wzztx.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.wzztx.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.cp9266.com-豪彩app下载| www.67fl.com-七乐彩走势图图表| www.660410.com-彩票神器下载| www.4437.xyz-众亿彩-| www.917378.com-网站彩票代理提成| www.ck27.com-吉林体彩网-| www.589787.com-双彩论坛字谜区| www.154480.com-博雅彩票3d预测| www.492406.com-广西体彩站电话| 彩客网www.969949.com| www.777643.com-网络福彩-| www.954350.com-大红鹰彩票下载| www.oc72.com-体育彩票开奖大乐透| www.662040.com-射阳竞彩店-| 博乐彩票www.338996.com| www.126367.cc-创彩是干嘛的| www.766975.com-2017竞彩普及日| www.919922.com-18彩app下载| www.994880.com-网上彩票代理赚钱么| www.295377.com-彩盈实时计划| www.438666.com-五彩绳-| www.561203.com-浙江体彩6%2b1| www.537529.com-无彩色的色有哪些| www.621802.com-才台湾彩券-| www.6890.in-好彩一八是什么数字| www.8977.top-3g彩票精品导航| www.45ym.com-洛阳体彩兑奖在哪里| www.1977.me-i中国彩吧论坛首页| www.9610.cn-彩票买哪个容易中奖| www.51575.cc-凤凰快三是不是真的| www.297163.com-十大彩票牛人| www.276962.com-体彩十分钟开奖| www.027311.com-五分彩怎样买才中| www.703281.com-乐盈彩票登录| www.035228.com-青岛西宁快三查询| www.186637.com-快三彩票是坑人的吗| www.wj59.com-连中彩票手机版| www.886802.com-新浪彩票双色球走势| www.984074.com-2018027福彩| www.qx9.com-传奇彩票快三靠谱吗| www.836499.com-477彩票-| www.953192.com-红好彩好抽吗| 天玺彩票www.523780.com| www.885215.com-唐龙聊彩-| www.953374.com-广东好彩三开奖结果| 易彩网www.12455m.com| www.257712.com-保定体彩中心| www.755733.com-爱开彩开奖早知道| www.235222.com-3d彩票开奖结果| www.i64.xyz-南方双彩网福彩3d| www.501554.com-新彩吧3地字谜| www.115370.com-彩钢板多少钱一平| www.670847.com-星彩p3论坛-| www.836948.com-160彩票客户端| www.932757.com-彩73彩票手机版| www.ad40.com-河南快三对子遗漏| www.56vv.com-乐亿彩票乐逸报| www.2641.net-网络时时彩被骗| www.758055.com-彩票刷流水兼职网站| www.515.cm-占卜预测彩票| www.342786.com-如何看懂是足彩让球| www.0176.top-国彩彩票官网| www.um02.com-快三內蒙-| www.298013.com-福彩幵奖结果今天| www.zg69.com-500彩票网上购彩| www.64vp.com-山西省彩票中心地址| www.370126.com-彩铅画花卉图片简单| www.519591.com-快三分析软件苹果| www.589893.com-海南七星彩今天图纸| www.137054.com-彩788网站链接| www.986773.com-手机能买的彩票网站| www.ih41.com-中国体彩app下载| www.522075.com-旭彩彩票网站| www.598051.com-9b彩票网-| www.586305.com-送彩金导航栏| www.811314.com-彩票王软件-| www.885250.com-唐龙说彩近期| www.953658.cc-计算器足球竞彩网| 金彩www.987jc.com| www.256729.com-中彩网怎么买彩票| www.586969.com-天天彩骗局揭秘| www.72406.com-快三彩票大小单双| www.756526.com-3d彩票今晚实票| www.884973.com-pc传奇彩-| www.956967.com-百彩网大全-| 澳客彩票www.105ak.com| www.2609.pw-河北十选五爱乐彩| www.0765.org-易彩规律-| www.2372.org-网上购买福彩可靠吗| www.36636.com-28彩票被骗-| www.xg81.com-体彩七星彩开奖结果| www.293689.com-正规的彩票网站建设| www.392771.com-明天能买什么奖彩票| www.379164.com-查一下福彩开奖号| www.624204.com-福彩双色球号码查询| www.719356.com-手游彩-| www.321.name-乐彩赢攻略-| www.568866.com-大彩乐开奖结果查询| www.648056.com-吉林快三总共几期| www.217341.com-五星彩票开奖查询| www.286735.com-全球彩票诈骗| www.809704.com-体彩出奖号-| www.878158.com-高频彩最稳倍投技巧| www.999875.com-体彩排列三兑奖规则| www.zr78.com-时时彩可以玩吗| www.233603.com-一分快三大小计划| www.7590.in-22彩票公司在哪里| www.mx26.com-《中彩彩票》安全吗| www.388491.com-彩友app用不了| www.71671.cc-福彩3d彩图片| www.580622.com-吉林省彩票得主| www.798148.com-吉林快三全能下载| www.2511.pw-新天天彩票下载安装| www.442444.com-58同城彩票会员| www.hc78.cc-快三三军玩法| www.la86.com-天天中彩-| www.789618.com-害人的竞彩-| www.865241.com-大奖网彩票合法吗| www.tk48.com-快三开奖助手破解| www.306220.com-千万彩票平台正规吗| www.54si.com-中大奖彩票登录| www.034841.com-彩计划app最新版| www.640517.com-爱盈彩合法吗| www.74vi.com-七星彩专区-| www.395944.com-彩虹宝宝免费看| www.885656.com-富民彩票app下载| www.959482.com-盈彩官网下载| 凤凰彩票www.77803r.com| www.129270.com-能用的彩票app| www.218876.com-大发快三邀请码吧| www.767100.com-好运彩彩票网丶| www.31fq.com-金口诀测港彩| www.022350.com-彩票语录-| www.133690.com-中国体彩大乐透直播| www.uw24.com-q彩app-| www.383344.com-七星彩第19029| www.512049.com-动物彩铅画简单| www.650630.com-彩虹伞托班教案| www.726371.com-够力五星彩下载| www.838151.com-彩钢围挡施工价格| www.901592.com-体育彩票排列5预测| www.966264.com-网络极速快三平台| www.cp5566.com-贵州快三的开奖结果| www.s20.org-吉林快三输了千万| www.67us.com-足彩奖金优化软件| www.3179.xyz-世界杯足球竞彩玩法| www.477326.com-彩神通资料-| www.kg10.com-山东福彩app官网| www.591815.com-香港马会彩票规则| www.516687.com-快三跨度表速查表| www.601703.com-80彩票靠谱吗| www.673212.com-481彩票倾家荡产| www.754011.com-搜狗彩票骗-| www.809332.com-玩彩对应码公式技巧| www.891383.com-福彩彩票广告词| www.968340.com-江西省体彩官网| www.cp7228.com-玩快三输钱案例| www.4515.biz-福彩3d资讯-| www.38179.com-彩票计划导入潮信| 福利彩票www.99677y.com| www.918800.com-婚恋交友诈骗时时彩| www.52551.cc-好彩客在哪下载| www.191735.com-五分快三怎么看走势| www.mc4.cc-快三走势图怎样看|