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.hong39.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.hong39.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.hong39.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.35415.com-代买彩票却没有买| www.010520.com-玩时彩输十几万负债| www.102124.com-电视上用的快三软件| www.183311.com-甘肃彩票快3图表| www.254281.com-好彩0567骗局| www.l92.cc-高手彩票字谜图谜| www.255611.com-七乐彩怎么算中奖| www.203152.com-安微快三开奖| www.210.la-体育彩票网| www.6200.biz-快三分分彩下载| www.365172.cc-湖北快三最新加奖| www.519786.com-众彩股份股票| www.196892.com-体彩开奖号直播现场| www.296899.com-惠民彩票合法吗| www.392756.com-自助福利彩票机| www.523785.com-时时彩对子出号规律| www.874973.com-大发时时分分彩| www.965864.com-新国际彩票app| www.cai7272.com幸运快三群骗局揭秘| www.004246.com-88期福彩开奖结果| www.201198.com-彩票开奖公告立| www.568022.com-中彩网怎么玩| www.719836.com-时时彩出对子规律| www.965841.com-268彩票下载安装| www.108939.com-小猪彩泥手工| www.740566.com-玖亿彩票官网| 500彩票网www.610390.com| www.41988.cc-d9彩票软件下载| www.26926.com-七星彩有没有中奖| www.75565.cc-大连精彩彩票| www.17282.cc-福彩专刊-| www.73997.cc-新彩吧3d字画迷| www.107391.com-彩票漏洞挣钱犯法吗| www.217591.com-3d彩神吧-| www.313622.com-辽宁唯博彩票信息| www.466788.com-七乐彩晚上卖到几点| www.610595.com-用彩铅画星空图片| www.748106.com-福彩3d专家号| www.873646.com-大盘娱城彩票| 500彩票网www.61655h.com| www.jg71.com-爱彩乐开奖结果| www.e06.cn-体彩竞猜最多获奖| www.28tx.com-三位数的彩票| www.128.bid-彩虹屁小作文模板| www.3902.org-新盈彩彩票-| www.8924.com-彩乐乐网公告| www.35868.com-头彩票手机版下载| www.503660.com-萍彩娜-| www.el98.com-大发快三人工计划网| www.94pj.com-乐米彩票怎么注册| www.978597.com-彩8彩票苹果版| www.tl13.com-智能彩票号码生成器| www.9640.biz-彩独2破解版| www.213365.com-彩神lx-| www.268105.com-湖北体彩精彩十分走| www.413295.com-晓风彩票软件| www.837518.com-卓高和立彩佳哪个好| www.966236.com-亿彩网被骗-| www.zv45.com-上海福彩兑奖时间| www.1849.me-五星彩票资料大全| www.24491.com-彩铅手绘古风人物| www.739870.com-华彩双色球-| www.528218.com-第一台彩色相机下载| www.365661.cc-彩色铅笔画入门| www.495111.com-如何打好竞彩| www.572223.com-彩81下载苹果版| www.647709.com-好运来彩网是真的吗| www.719901.com-七星彩票兑奖说明| www.797614.com-彩票99购十分彩| www.871246.com-彩票分析软件破解版| www.937612.com-体彩第19016期| www.983240.com-盈彩把钱提得出来不| www.sp9.com-长春快三怎么玩稳赚| www.oq69.com-福彩3d牛材网| www.8451.org-王博彩王中王| www.543656.com-体育彩票加时算吗| www.862871.com-今晚七乐彩开奖信息| www.081069.com-手机怎么买福利彩| www.211642.com-网络快三是合法的吗| www.380057.com-大彩乐的开奖结果| www.788176.com-福彩宝典-| www.933105.com-彩票群炒群常用话语| www.1705.shop-专门猜彩票奖软件| www.985490.com-举报非法网络彩票| www.995704.com-足彩能买单场吗| www.so34.com-彩票预测网站| www.006441.com-内蒙古快三抓豹子| www.19785.com-嘉兴体育彩票销售点| www.022134.com-020彩票网-| www.261506.com-易彩补漆笔-| www.510592.com-夸人漂亮的彩虹屁| www.567836.com-中国全部彩种| www.836314.com-中国体彩篮球计算器| www.990197.com-乐彩网软件下载| www.001.online-拉菲二分彩玩法| www.9052.vip-福彩初几开始售票| www.184700.com-北京快三计划官网| www.290997.com-地方彩票开奖| www.116979.com-福彩足球-| www.104053.com-好彩堂红财神报| www.933258.cc-彩29app-| www.100834.com-qq群快三-| www.nn6.cc-五分快三怎么看走势| www.9453.com-彩票app贴吧| www.333402.com-豪彩娱乐下载app| www.131442.com-彩礼和聘礼-| www.908116.com-贵州七星彩领奖地点| www.qr7.com-廊坊快三彩票结果| www.67cc.cc-818彩票下载安装| www.8024.top-彩虹伞小班体育活动| www.5647.cm-彩购5-| www.46521.com-彩票平台怎么刷分红| www.022762.com-海南排列五私彩玩法| www.109271.com-彩票方法怎么破解| www.186082.com-快三挂机-| www.351552.com-世界杯彩票大数据| www.633334.com-蓝彩2串1什么意思| www.828037.com-春天彩票网站靠谱吗| www.860711.com-26选5好彩3奖金| www.938561.com-共赢彩票计划| 彩神购彩www.csgc7.com| www.jy0.cc-江苏福彩开奖公告| www.929942.com-河南竞彩快三查询| www.994086.com-开户送68元彩| www.06we.com-34期福彩开奖结果| www.030558.com-福彩定位双色球杀号| www.282587.com-时时彩五星最稳大底| www.706809.cc-时时彩分析图软件| www.837013.com-中彩票资讯-| www.894188.com-779彩票骗局| www.970485.com-排列五体育彩表| www.io71.com-最新足彩分析| www.t24.me-i8彩票官方网址| www.83891.com-买彩票真能赚钱吗| www.755850.com-苹果手机贴彩膜| www.14446.com-七星彩一等奖最低| www.005204.com-728彩票官方版| www.96ga.com-火星彩票可信吗| www.7498.cm-青海省福彩中心官网| www.47569.com-好彩妹口头禅尴尬| www.003337.com-怎样上网买彩票| www.08vd.com-三d试机号彩经网| www.642.date-我赌快彩输了好多钱| www.949249.com-查下福彩三d图谜| www.pa81.com-3d预测彩吧-| www.043886.com-海口彩票网-| www.199203.com-福彩快3怎么玩的| www.2680.cm-福彩块乐十分走势图| PK彩票www.530534.com| www.16bz.com-彩虹电影台密码| www.512632.com-卡通彩铅画人物图片| www.700459.com-体育彩票打印机| www.58548.com-天天中彩票多乐快3| www.984979.com-鼎盛彩票下载| www.76xq.com-授渔看彩最新杀号| www.387553.com-如何下载87彩店| www.129450.com-彩运来登录网址| www.231732.com-中国彩吧网开奖号| www.319339.com-体彩游泳夺金中奖金| www.13172.com-福彩快3计划| www.6079.cm-飞宫奇门测彩| www.oe3.com-江苏快三有没有技巧| www.81lk.com-江西福彩开奖| www.2345.gg-七彩云浏览器免费下|