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.zwbsc.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.zwbsc.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.zwbsc.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.999722.com-95彩票平台合法吗| www.14ve.com-福彩家彩网-| www.8156.biz-必发彩票秒速时时彩| www.553478.com-体彩模拟投注| www.792583.com-福彩归谁管-| www.876069.com-约彩365下载| www.977705.com-足彩让球胜平负规则| www.ho42.com-上海快三诀窍| www.11mx.com-宁波市福彩网| www.1605.vip-吉林快三同号遗漏| www.ws77.com-快三表格数据分析| www.0546.date-体彩新规定理性购彩| www.072255.com-欧洲秒速时时彩开奖| www.532470.com-临沂福彩中心在哪| www.630556.com-海南七星彩规律论坛| www.738939.com-中国福利彩票微信群| www.872630.com-彩票快3出奖号码| www.ut60.com-彩票套利月入过万| www.gf36.com-彩票端是真的吗| www.018167.com-彩专家海滨在线计划| www.791726.com-时时彩的网址是多少| www.1011.net-福彩快开结果查询| www.153036.com-彩票自动核对| www.55605.com-永利彩票注册平台| www.vl10.com-湖北福彩开奖结果| www.7912.loan-七乐彩134期| www.026677.com-一注体育彩票价格| www.3164.biz-手机版彩票开奖| www.149342.com-福利彩票083期| www.278135.com-省福彩中心主任级别| www.393779.com-彩票大奖兑奖引见| www.783068.com-内蒙古彩票重奖查询| www.62968.com-彩客科技-| www.87678.com-彩票定位胆怎么玩| www.75124.com-福彩刮刮乐新票上市| www.vd39.com-河南省体彩网| www.31138.cc-内蒙福利彩票| www.92208.com-中国福利彩票好彩2| www.5278.cc-福州体育彩票店转租| www.840043.com-中国什么彩票是真的| www.989522.com-家彩网排列三试机号| www.26ft.com-福彩3d组六遗漏| www.13458.com-足球竞彩软件下载| www.40204.com-彩票破损-| www.083358.com-分分钟彩票官方网站| www.576484.com-唐山市福彩中心电话| www.60ie.com-网易购彩下载安装| www.648234.com-曼德尔彩票公式| www.144833.com-竞彩足球交易量| www.06721.com-3d彩票图3月份呢| www.044677.com-美团彩票如何领取| 大赢家彩票平台www.955484.com| www.3td.com-药京彩下载-| www.608.cc-天天时时彩开奖结果| www.402323.com-先给彩礼还是先领证| www.331386.com-全国彩票计划网| www.979917.com-互动彩票平台| www.576.cm-18161期胜负彩| www.57711.com-河北福彩排7走势图| www.123686.com-福彩61开奖规则| www.370033.com-彩票平台推广2维码| www.554242.com-排列五预测众彩网| www.zy83.com-何振东竞彩-| www.08020.com-官员中彩票大奖| www.cp430.com-江西快三出奖结果| www.no31.com-竞彩比分直播老版本| www.8dj.com-博彩老排列三| www.896162.com-彩票如何才是中奖| www.cai3011.com二分快三开奖号码| www.538562.com-赢彩网是正规平台吗| www.mu50.com-福彩手机自助购彩| www.45vy.com-彩漂的作用使用方法| www.0718.pro-福彩机器能卖多少钱| www.6437.xyz-竞彩赛程赛果| www.16928.com-快三反计划倍投| www.59529.com-彩虹t恤-| www.050977.com-彩店宝彩票客服电话| www.149069.com-彩之乐app下载| www.5048.com-游元东路体育彩票店| www.31355.cc-海南福彩快2| www.e55.in-七乐彩单式开奖查询| www.760616.com-网球去哪里买彩票| www.841501.com-体彩线上活动| www.910945.com-彩测速线路-| www.981699.com-亚洲彩票登录| www.lt.com-竞彩足球比分| www.qm09.com-希腊5分彩开奖| www.r70.com-福利彩票是真是假| www.31kb.com-竞彩足球跟单彩票网| www.573553.com-网上可以购彩票吗| www.418938.com-排列三体彩百度贴吧| www.632903.com-立彩助手闪退| www.750378.com-豪彩官方注册| www.853104.com-彩票广告图片搞笑| www.981865.com-分分彩平台注册| www.ch30.com-快彩网骗局-| www.072364.com-大快发3彩票| www.228389.com-快3走势玩彩乐网| www.308529.com-青岛体育彩票投注站| www.382367.com-大智慧彩票网合法吗| www.737251.com-怎么才能选好的彩票| www.811581.com-3d彩票秘密-| www.880937.com-网络彩票兼职| www.941059.com-互联网彩票推广语| www.987414.com-河北快三冀彩宝| www.lj2.com-幸运快三走势怎么看| www.404017.com-传奇故事之东北彩王| www.596898.com-福彩牛人-| www.722622.com-16788彩票-| www.880195.com-包头福彩中心营业员| www.965586.com-竞彩5oo-| www.ni5.com-内蒙快三开奖结果啊| www.vh29.com-福彩3d分解断组| www.966060.com-5分钟一期的传统彩| www.365826.com-祥瑞彩票代打兼职| www.580869.com-彩票平台制作多少钱| www.762812.com-什么是极速时时彩| www.888927.com-彩站宝怎么发布跟单| 新盈彩www.xinyc8.com| www.81088.cc-网络彩票被骗怎么办| www.453796.com-竞彩彩票官网多少| www.567684.com-66cp彩票-| www.743905.com-酷彩app真的吗| www.811279.com-中国福彩3d图纸| www.870573.com-彩票投资计划| www.936907.com-红旗彩票怎么玩法| www.980491.com-梦想彩票站苹果版| www.bz72.com-大信彩票是真的吗| www.wr27.com-200w彩票app| www.19mh.cc-亿乐彩平台安全吗| www.92gi.com-t乐彩开奖信息| www.3111.vip-彩票弃奖有多少次| www.8185.in-高频彩票时间调整| www.26287.com-中国彩吧下载| www.61276.cc-购彩v是真的吗| www.360816.com-敬力七星彩开奖结果| www.475333.com-九号彩票怎么注册| www.566542.com-743cc期期好彩| www.622720.com-双色球福彩开机号码| www.28698.com-彩11app-| www.95564.com-安庆福利彩票网点| www.127437.com-178彩票官网下载| www.193345.com-北京快三中奖结果| www.245968.com-福彩二十选五| www.315031.com-竞彩网计算器胜平| www.368756.com-快三追号公式| www.455580.com-彩票最新中奖故事| www.529590.com-香港彩神网站| www.788969.com-竞彩初赔绝密| www.864578.com-牛牛彩网彩票| www.920756.com-佰萬彩票合法吗| www.969826.com-快乐双彩今晚开奖号| 吉彩www.318016.com| www.cw66.cc-必赢彩票事件| www.8zn.com-有两元的彩票| www.55zv.com-安庆体育彩票店在哪| www.0144.net-彩色怎么造句| www.6529.biz-福彩晚秋谜底| www.044379.com-北京福利彩票论坛| www.266805.com-江苏快三专业计划群| www.331476.com-天天彩app下载| www.388218.com-华彩团队-| www.186588.com-十十彩十分钟一期| www.244014.com-彩票1分快三计划|