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.89120120.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.89120120.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.89120120.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.47ux.com-新浪博客爱彩| www.699970.com-如何支付宝买彩票| www.786604.com-极三彩票-| www.873273.com-网易购彩app| www.71604.com-福利彩票快三改| www.371208.com-澳客彩票客户端官网| www.673502.com-快三和值跨度| www.766265.com-体彩幸运赛车走势图| www.849311.com-上海快三跨度开奖控| www.911620.com-全民彩票官方网站| www.166024.com-北京快三推荐号码| www.252054.com-福彩3d中彩网| www.356046.com-宏腾彩票网合买平台| www.434352.com-彩票营销策划方案| www.523342.com-彩票76-| www.589400.cc-河南快三椎荐号码| www.658202.com-老三可口福彩微信群| www.725776.com-快三预算法-| www.794507.com-竞彩高手谈盈利心得| www.865213.com-彩票骰子有什么技巧| www.926195.com-福建省体彩31选7| www.979028.com-淘淘彩票app| www.cp517.com-广西快三每天多少期| www.kl00.com-河北彩票中奖| www.l82.net-彩票冷号热号规律| www.35zw.com-本期七星彩规律图片| www.98ja.com-微博世界杯足彩| www.2357.vip-七彩虹主板官网| www.7179.xyz-宝乐彩票安全吗| www.15355.com-妛客竞彩网-| www.215383.cc-彩票多少钱-| www.595815.com-福彩3d数字八卦图| www.322355.com-职业彩票高手怎么玩| www.388642.com-体彩预测家彩网| www.492259.com-黑彩支付宝充值漏洞| www.559358.com-甘肃陇彩宝-| www.622250.com-九彩-| www.683917.com-福彩3d推荐条件| www.757230.com-乐彩平台靠谱吗| www.822793.com-篮彩大小分算加时吗| www.76pr.com-买动物的彩票| www.1266.win-七星彩开奖查询下| www.6201.shop-名彩客栈双色球预测| www.07536.com-澳彩盘大讲堂| www.54251.com-时时彩遗漏冷热统计| www.296300.com-福利彩票投注网站| www.367375.com-体彩票中奖号码规则| www.871049.com-2018新型彩票| www.385511.com-app购彩网靠谱吗| www.505576.com-炫彩跑马灯壁纸| www.576821.com-甘肃彩票中奖事件| www.667111.com-彩民妙招中大奖| www.748601.com-中彩娱乐的二维码| www.826779.com-福彩3d藏机诗| www.899546.com-81彩-| www.971504.com-手机购买彩票合法吗| www.tc82.com-快三豹子后面出什么| www.067658.com-越穷越买彩票| www.150707.com-微彩站合法吗| www.229759.com-新彩网-| www.301350.com-国际彩票是什么骗局| www.371946.com-死神全彩色系漫画| www.452766.com-c78彩是真是假| www.079061.com-香港牛蛙彩票资料| www.195652.com-福建快三形态走势图| www.298851.com-体彩排列三推荐号的| www.402381.com-dd彩票网址-| www.954926.com-黑彩余额修改器下载| www.6067.vip-足彩14场胜负场| www.30528.com-瑞彩祥云免费下载| www.95871.com-广西快三三同号遗| www.411188.com-双色球唯彩会| www.565792.com-彩票中奖真实吗| www.838530.com-足彩对冲套利方法| www.961467.com-大奖彩票下载苹果| www.hc96.com-福彩双色球普通投注| www.iv00.com-竞彩足球比分预测| www.284384.com-体彩都有哪些彩种| www.734711.com-2019年3月足彩| www.880198.com-彩票套利吧-| www.rx4.cc-河北快三组合走势图| www.19oi.com-肥城体育彩票位置| www.14640.com-海南七星彩如何包码| www.031966.com-十一选五彩票能买吗| www.286336.com-481彩票网注册| www.461369.com-福彩3d是不是做假| www.284039.com-彩票7位数-| www.952618.com-九州彩票怎么没有了| www.370110.com-龙江风采彩票| www.811791.com-大赢家竞彩实体店| www.ab72.com-江苏快三开奖的结果| www.13uq.com-彩票老师微信号| www.1402.xyz-彩运来注册网址| www.50911.com-福彩3d杀码图今天| www.081111.cc-买彩票念什么咒语| www.233617.com-有香港快三彩票吗| www.410234.com-永信彩票下载| www.669331.com-彩统计器-| www.964193.com-体彩试机号及金码| www.375829.com-彩票聊天室红包雨| www.310486.com-3d彩票个人技巧| www.447884.com-3d梁博说彩公众号| www.9028.cc-胜负彩比分直| www.172911.com-快三贵州走势图| www.26ns.com-云购彩票怎么玩法| www.0972.cn-帮朋友买彩票中奖了| www.875117.com-微彩吧app官网| www.662287.com-366博彩下载| www.901995.com-彩6彩票网页版| www.118873.com-福彩刷人气靠谱吗| www.7918.vip-福利彩票开奖预测| www.1yy.com-彩色激光打印机硒鼓| www.47wt.com-申请彩票站多少钱| www.334646.com-可提现的彩票app| www.174900.com-百姓彩票下载| www.937062.com-福彩三d走势图网易| www.273262.com-甘肃省福彩中心地址| www.391988.com-体育彩票营销计划书| www.cai2933.com安徽快三预测一定牛| www.586763.com-体彩7位数走势图表| www.237965.com-发彩网网址是什么| www.732854.com-支付宝怎样买彩票| www.386089.com-彩1234论坛网站| www.71mc.com-七月彩票走向| www.1179.in-体育彩票入门知识| www.5388.vip-彩票777什么网站| www.360362.com-分分彩最稳倍投| www.793938.com-竞彩篮球稳赢方法| www.16008.com-天天彩选4开奖号码| www.5023.vip-吉祥彩票欢迎| www.426369.com-快三分分彩在线预测| www.1wb.com-福彩门户安全…| www.477766.com-江西体育彩票任三| www.436036.com-云南体彩网站| www.986952.com-玛雅彩票极速时时彩| www.150202.com-幸运中彩票天天中奖| www.631.website777彩票网-| www.0cx.cc-七星彩私彩算违法吗| www.25iq.com-浙冮体彩试机号| www.93pj.cc-分分彩如何看号| www.386998.com-尼彩手机怎么没有了| www.81ym.com-江西省体育彩票地址| www.554367.com-五分快三是不是官方| www.0080.loan-福彩3d豹子走势图| www.429075.com-体彩排5走势图| www.150296.com-彩83彩票官网| www.2752.wang-福利彩票倍数001| www.74900.com-彩票业前景-| www.60qp.com-足彩投资计划| www.78234.cc-彩读音-| www.170925.com-河北省快三玩法说明| www.948102.com-福利彩票的发行宗旨| www.8739.biz-华南地区七星彩论坛| www.109492.com-可以挂机的彩票平台| www.033756.com-如意彩票官网网址| www.078889.com-7星彩复式投注规则| www.44341.com-彩票竞猜app入口| www.117899.com-立体彩铅画教程| www.450295.com-梦见彩票的数字| www.13125.cc-官网最大彩票平台| www.878961.cc-彩票号码是几位数| www.070966.com-七乐彩中奖图片| www.509900.com-500彩票官方运营| www.024746.com-七星彩奖表够力|