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.tobyding.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.tobyding.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.tobyding.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天

知道了
9彩注册 www.41zz.com-下载彩票开奖加| www.393781.com-福彩手机软件正规吗| www.599052.com-易彩乐违法吗| www.726922.com-乐福彩票可以提现吗| www.910291.com-3d胆码预测家彩网| www.98xq.com-彩天下378-| www.2881.cc-1分快三计划平台| www.8414.shop-中彩彩票pc蛋蛋| www.42vj.com-今日开奖的彩票种类| www.996067.com-北京pk彩票-| www.11vg.com-福彩合尾走势图| www.015177.com-仲博购彩平台下载| www.869507.com-唯彩会彩票双色球| www.997329.com-利彩工具3d走势图| www.22589.cc-人人中彩网-| www.080654.com-色彩图片-| www.377106.com-97彩票用户注册| www.23is.com-既时竞彩比分直播| www.170857.com-长春快三怎么玩| www.25619.com-彩虹张惠妹| www.079041.com-牛蛙彩票正版资料| www.239135.com-套彩金刷流水| www.343766.com-500彩票能玩吗| www.691760.com-江苏快三网易和值| www.85xw.com-足彩14场对阵爱浪| www.114239.com-深圳福彩鑫-| www.670640.com-内蒙古彩票中奖者| www.87sj.com-大地彩票黑钱| www.123893.com-彩票816是真的吗| www.26ug.com-足球彩票中奖是多少| www.091087.com-福彩3d怪字神贴图| www.673137.com-3d彩票结果彩搜网| www.462.me-快三客赚钱有没有事| www.31173.cc-福彩快3中奖技巧| www.46xn.com-中博彩票怎么样| www.4782.com-558彩-| www.32980.com-江苏体彩网站点申请| www.759637.com-全天重庆市彩| www.020294.com-体彩专家杀码| www.136112.com-709彩票com-| www.245100.cc-内蒙古福利彩票双色| www.8kx.cc-两元彩票网l| www.71ux.com-彩店宝下载软件| www.il85.com-下载二二彩票| www.771531.com-澳门5分彩走势图| www.55ff.cc-pk彩票开户-| www.361808.com-官方新彩吧-| www.693861.com-体彩双色球机选号码| www.775802.com-河北体彩兑奖流程| www.902128.com-3d彩吧图库总汇| www.996609.com-亚搏彩票软件安装| www.bm56.com-手机正规彩票网站| www.sy95.cc-高频彩票平台哪个好| www.27eg.com-599彩票计划| www.55777.cc-七乐彩机选五注| www.246960.com-七星彩中奖概率| www.702195.com-体彩283中奖规则| www.44sq.com-彩票魔图-| www.34362.com-上海福彩官方网站| www.m27.com-广西快三高手软件| www.162303.com-下彩网骗人-| www.726637.com-怎样下载网上买彩票| www.873212.com-贵州体育彩票app| www.625021.com-苏宁彩票快3| www.750838.com-卓易彩票双色球下载| www.878462.com-2元网彩票开奖| www.991245.com-快三多少天有效期| www.xk92.com-江苏快三专家预测| www.7021.biz-买彩票有哪些技巧| www.799.date-大六壬测彩诀窍| www.678221.com-体彩十一选5走势图| www.772732.com-吉利的彩票群名| www.880636.com-3号彩票网-| www.4961.com-超级大乐彩怎么玩| www.286619.com-彩票一键出号软件| www.959894.com-网上买彩票的兼职| www.512848.com-玩彩网app充值| www.598470.com-体彩19036结果| www.678457.com-福彩3d专家总汇| www.25ig.com-87彩票店邀请码| www.008181.com-天天彩选4开奖结果| www.60ln.com-关注彩票中奖号码| www.2851.xyz-黑彩输钱怎么追回| www.7022.net-篮彩单场-| www.014166.com-福利彩app靠谱吗| www.974792.com-南国七星体彩论坛| www.6237.cn-最新胜负彩预测分析| www.241112.com-初级简单彩铅风景画| www.iu92.com-中体彩彩票app| www.85626.cc-福彩手机能买吗| www.225444.com-英国三分彩开奖结果| www.306089.com-337彩票软件下载| www.544264.com-怎样才能中彩票呢| www.409398.com-1000彩票app| www.708223.com-状元彩票网能提现吗| www.711365.cc-竞彩分析师资格证| www.809751.com-彩票自助售票机中奖| www.980790.com-七彩杯变色教程| www.mt83.com-978彩票-| www.92ec.com-福利彩票真实中奖人| www.3652.xyz-甘肃快三结果| www.1865.xyz-彩赢娱乐是骗局吗| www.610215.com-手机能买彩票快3么| www.053654.com-竞彩足球推荐骗局| www.567906.com-迅盈彩票邀请码| www.434300.cc-买3d彩票看哪个网| www.hj46.com-中彩威视软件下载| www.70ea.com-红菜苔彩票-| www.u00.club-分分彩时时彩的网址| www.8811.cm-分分彩投注软件下载| www.2gb.com-福利体育彩票| www.742265.com-大发彩票邀请码多少| www.157175.com-九号彩票是否违法| www.185501.com-快三有没有假| www.262272.com-快三遗漏号-| www.342828.com-吉利三分彩-| www.651041.com-创意水彩作品| www.749062.com-中彩官网快3| www.841669.com-一路红竞彩店app| 99彩www.996963.com| www.820693.com-彩钢瓦生产厂家地址| www.nj06.com-竞彩篮球360| www.80865.cc-江苏体彩排列七| www.056023.com-彩票十二生肖叫啥| www.125658.com-体彩排3预测| www.200314.com-彩票123最新下载| www.279471.com-3分时时彩走势图| www.358976.com-怎么选七星彩号码| www.521202.com-财富彩票官网下载| www.597029.com-彩票怎么选号码| www.671022.com-彩宝贝定3和尾排3| www.749896.com-排列三字谜双彩论坛| www.819503.com-彩票统计分析方法| www.897312.com-福彩刮刮乐手机扫码| www.4159.cc-成都七彩云和| www.632372.com-彩店宝倒闭了吗| www.761242.com-凤凰彩票平台安全吗| www.870669.com-凤凰彩票开奖网站| www.979427.com-江苏体彩开奖结果| www.j40.cc-118彩票手机版| www.000321.com-温州体育彩票网站| www.060677.com-菲律宾干黑彩的工作| www.710503.com-鼎隆刷彩是做什么的| www.560985.com-千亿彩票官方客户端| www.657293.com-福彩3d组六号码表| www.832209.com-彩票c6软件下载| www.905023.com-826彩票下载安装| 幸运彩票www.982799.com| www.684908.com-3d字谜画谜新彩吧| www.ks89.com-湖南福利彩票3d| www.083062.com-哪些省有福彩快三| www.433127.com-51888彩票-| www.73942.com-彩票源码演示站| www.270291.com-幸运快三是国家的吗| www.146200.com-nba竟彩-| www.315454.com-彩虹7无人机图片| www.446646.com-今日足彩二串一推荐| www.618074.com-中国福利彩票公司| www.844418.com-中国彩票最大弃奖| 博亿彩票www.662by.com| www.697075.com-天津时彩直播| www.764124.cc-彩678怎么下载| www.595795.com-鑫彩公司-| www.751797.com-全国快三网-|