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.xuehaojie.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.xuehaojie.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.xuehaojie.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.26218.com-微彩吧骗局-| www.89637.com-广州彩色纸箱| www.061564.com-彩客网比分直播彩票| 爱彩乐www.132918.com| www.vf82.com-彩22-| www.48nz.com-福彩红五图库| www.100407.com-乐彩客怎么下载不了| www.247897.com-贵州11选5爱乐彩| www.341566.com-诺亚彩票登录| www.426589.com-江苏虚拟足球竞彩网| www.531681.com-沂风沂俗博彩资料| www.768393.com-时时彩开奖彩经网| www.840224.com-传统彩票开奖| www.906778.com-66好彩app-| www.969653.com-快三第一门户k3t| 豪彩VIPwww.856659.com| www.024814.cc-福快三彩票走势图| www.106636.com-足彩精通-| www.178395.com-快乐彩开奖结果今天| www.249498.com-河北燕赵风彩福彩网| www.325488.com-海南彩票投资大赛| www.391712.com-易迅彩票是腾讯的| www.507399.com-福彩3月25号| www.581777.com-什么彩票每天签到| www.654740.com-七星彩大奖图片| www.503351.com-彩之堂网彩可靠吗| www.c82.club-百宝彩票网群英会| www.41tg.com-山东体彩扑克3豹子| www.036674.com-好彩vipapp| www.397634.com-福彩刮刮乐编码秘籍| www.583625.com-亚盘的足彩软件下载| www.694931.com-常州彩票得主| www.811152.com-北单竞彩官网| www.967924.com-西安彩票案贾安庆| www.im55.com-山东福彩中心| www.3cr.com-上海时时乐开彩结果| www.635.cm-福彩东湖社区网址| www.8155.tv-必发彩票提现不了| www.434001.com-唏关彩外国人| www.543243.com-福彩三的牛彩图迷| www.624011.com-春秋彩票计划群| www.700951.com-今晚可买什么彩开票| www.783938.com-乐彩彩票不能提现| www.876303.com-重庆时彩时彩| www.961338.com-竞彩猫app苹果版| www.bt21.com-福彩双色球快3玩法| www.7244.vip-彩虹机用氧气| www.51148.com-纵购彩票-| www.089190.com-广东体彩开奖结果| www.935778.com-福彩网app骗局| www.cp9579.com-中彩网是不是合法的| www.47pj.cc-刚力彩芽街拍| www.3453.pw-福彩网彩钟| www.39213.cc-红财神报彩图网址| www.019589.com-贵阳申请福利彩票点| www.139124.com-彩22官方下载| www.325472.com-国家支持海南彩票| www.82912.com-五百万彩票平台| www.113890.com-选彩票号码-| www.596215.com-甘肃天水福彩中心| www.706262.com-中国福彩开奖现场| www.850233.com-竞彩7串21-| www.995809.com-足彩分析公式| www.z59.club-众益彩票不能提现| www.2862.wang-昨晚七星彩开奖结果| www.34459.com-上海福彩中心投注| www.052660.com-吉林省福彩四国游| www.237671.com-快三预测北京| www.372603.com-下载天天彩票αpp| www.532175.com-福彩助学申请书| www.665165.com-七星彩哪天开奖日期| www.871168.com-彩票到底是不是骗局| 天天彩票www.7782w.com| www.xj04.com-福建福彩3d走势图| www.71dy.com-vr时时彩接口| www.03138.cc-彩票讨论微信群| www.019684.com-分分彩计划稳赢版| www.233419.com-吉林快三开奖号今天| www.455627.com-用手机怎么打彩票| www.742178.com-官彩是什么意思| www.931324.com-世界杯彩票投注规则| www.cl5.cc-什么叫江苏快三| www.zm47.com-数字新浪彩票网| www.63rx.com-彩经app-| www.3907.org-够力七星彩走势安装| www.5655.tv-六开彩奖结果| www.12821.cc-彩漂有什么用| www.045605.com-彩81苹果版-| www.8128.xyz-北京时时彩平台官网| www.r34.cc-乐城网购彩-| www.1452.xyz-下载个大赢家彩票| www.29jx.com-什么叫搜狐彩票| www.zl63.com-彩票500app-| www.0879.date-采购大厅江苏快三| www.796453.com-鸿运彩票合法吗| www.872203.com-河北省体彩网| www.332599.com-彩票多久过期| www.jq68.com-10分快3彩票| www.621687.com-广西福彩快三今天| www.908283.com-最新七乐彩计算公式| www.10499.cc-胜负彩综合走势图| www.92755.cc-福彩连环夺宝坑人| www.607661.com-福彩走势图不连线的| www.707114.com-吉林快三和数表| www.4797.vip-悦彩文化-| www.22658.cc-彩票店转让注意事项| www.017160.com-三分彩计划-| www.031169.com-106官网彩票充值| www.177956.com-百彩网-| www.3794.biz-网易竞彩足球比分| www.620570.com-中国彩票协会| www.387.website福彩迷图总汇| www.683469.com-爱开彩app-| www.901607.com-南方双彩网3d预测| www.8280.in-江西南昌市彩票| www.724611.com-股票与彩票-| www.491904.com-凤凰彩票兼职靠谱吗| www.87283.com-uu彩票app-| www.935604.com-玩彩票是否能发财| www.301228.com-立彩彩票电脑版| www.30qe.com-分分彩在哪里开奖| www.bn34.com-广东体彩ii选5| www.358132.com-微彩吧怎么提现| www.012412.com-体彩排列五几点停售| www.131096.com-环彩彩票-| www.79le.com-国民彩票网址导航| www.28276.com-常州彩票中奖| www.127934.com-彩虹之下赵雷歌词| www.876544.com-3d彩报大全图片| www.565408.com-南通市竞彩网点| www.47493.com-江苏好彩60123| www.c27.vip-北京福彩一等奖| www.359008.com-十四场开奖彩客网| www.70960.com-彩票白菜分享| www.322960.com-彩票查询p62| www.496903.com-好运彩是私彩吗| www.84641.com-民政部彩票分成案| www.023469.com-彩票怎么买不亏钱| www.355789.com-手机投够彩票| www.953224.com-体育彩票兑奖时间| www.866730.com-58彩58开奖-| www.066095.com-体育彩票倍率| www.337150.com-广西快三50期| www.17wv.com-体彩排列五直选遗漏| www.76661.com-中国体育彩票赛事| www.977710.com-江苏快三几点封盘| www.72pz.cc-体彩串关容错表| www.060218.com-天天彩选四历史号码| www.604074.com-杭州格彩服饰冬装| www.538478.com-福彩3d大花虎图库| www.797504.com-彩民彩票世界杯| www.184114.com-吉林快三开奖结果进| www.5125.link-彩票大奖历史| www.053133.com-幸运彩票手机版官网| www.34808.com-qq彩票竞猜金豆| www.024865.com-极速赛车彩票小技巧| www.234976.com-福彩端app-| www.337455.com-yy彩票登录-| www.yz63.com-红牛彩票登录| www.13239.cc-彩客网赛果概率分析| www.093585.com-乐选3中奖规则体彩| www.727598.com-福彩刮刮乐能中奖吗| www.515661.com-安徽双色球彩票官司| www.823488.com-彩涂铝卷市场行情|