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.jg0839.com.cn/'>
					<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.jg0839.com.cn/'>
						<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.jg0839.com.cn/'>
						<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.88472.com-网络彩票推广合法吗| www.127170.com-彩铅画春天风景教程| www.880094.com-徐文轩彩票预测网| www.982138.com-577彩票提款不了| www.ph9.com-福利彩票3d合法吗| www.ta29.com-赢彩彩票网址| www.66vq.com-杏耀彩票可信吗| www.7742.cn-∪9彩票破解| www.51977.com-彩票中大奖怎么领取| www.691306.com-爱美人足彩-| www.882942.com-彩票刷流水套利| www.525102.com-彩票平台ip-| www.658588.cc-中彩乐群英会走势图| www.907215.com-快三助赢计划| www.rn12.com-菲律宾彩票-| 吉彩www.407872.com| www.967805.com-百合网上的彩票男| www.bx54.com-最新彩票平台| www.196633.com-百宝彩注册-| www.26839.cc-七星彩怎样看规律| www.574051.com-乐彩网邀请码| www.639472.com-武汉体育彩票店转让| www.632905.com-竟彩蓝球让分胜负| www.717637.com-竞彩必发盈亏指数| www.802166.com-彩谜天地联销图今天| www.920516.com-楚星彩票app| 大赢家彩票www.372411.com| www.65ut.com-最稳定的私彩平台| www.026763.com-网络投彩是什么骗局| www.154503.com-什么样的彩票能挣钱| www.243605.com-鸿彩票-| www.109408.com-北京体彩兑奖地址| www.96932.cc-有哪些足彩推单| www.104580.com-快三算号库-| www.950231.com-彩宝彩票app安卓| www.28358.com-江苏体彩中心地址| www.020334.com-彩108下载-| www.356096.com-大乐透彩票投注| www.286888.com-彩票号码生成器下载| www.365226.com-600彩票是假的吗| www.333838.com-黑彩服务器在境外| www.552047.com-乐赢彩票网-| www.659376.com-皇彩网-| www.954748.com-彩788犯罪吗| www.cai9090.com河北快三走图| www.yb90.com-韩国彩票网址| www.4148.vip-彩虹e台app-| www.42744.com-云彩彩票合法吗| www.017841.com-如何购双色球彩票| www.216.org-玩彩网app充值| www.9485.cc-什么彩票5位数| www.77215.cc-排列三开机号乐彩网| www.155724.com-重庆肘时彩开奖直播| 吉彩www.318016.com| www.806179.com-3d彩吧网图库| www.890982.com-七星彩彩票统计器| www.954109.com-360彩票是真的吗| 亿彩www.6832t.com| www.hg52.com-黑龙江福彩网| www.10dh.com-彩生活物业投诉电话| www.532.website搜索福星中彩网止| www.4711.me-80彩票集团-| www.253633.com-竞彩下载-| www.318001.com-彩票977-| www.883856.com-新博瑞彩票正规吗| www.076696.com-如何买体育彩票| www.039049.com-福彩快3投注方法| www.598656.com-7星彩历史比较器| www.uf08.com-乐彩网靠谱吗| www.70lj.com-彩票1400亿-| www.45pt.com-朱一龙彩铅画| www.61001.com-保定体彩中奖| www.751145.com-台湾彩券官网| www.872015.com-彩票彩之家-| www.958747.com-网络彩票赌博报警| www.ve3.com-七乐彩中奖图表| www.03cs.com-甘肃省快三基本上| www.559069.com-呼和浩特彩票大奖| www.456798.com-118购彩网-| www.332468.com-黑彩提现成功过吗| 大赢家彩票网www.83033x.com| www.654288.com-幸运彩52ⅹyc| www.gc29.com-排三乐彩网-| www.72484.com-福彩开奖杳绚| www.717199.com-彩铅画对幼儿的好处| www.910214.com-彩票3d怪字-| www.kj26.com-易彩网的邀请码在哪| www.494236.com-彩八官方-| www.667425.com-吉隆坡时时彩官网| www.889575.com-乐彩网论坛手机版| 七星乐www.535666e.com| www.r22.xyz-重庆时时彩网购群| www.18825.com-8亿彩票网址| www.ts44.com-安徽福彩快开三| www.079.vip-机选七星彩能中奖吗| www.812953.com-体彩线上购买模式| www.80xp.com-天天时时彩软件下载| www.7481.cn-彩02软件正规吗| www.029105.com-爱彩乐十一选五下载| www.289608.com-乐彩网靠谱吗| www.525261.com-网易彩票安全吗| www.636098.com-彩虹3-| www.86602.com-中国梦想彩票触屏版| www.360548.com-体彩环岛赛玩法规则| www.555148.com-时时彩会不会作弊| www.964830.com-浙冮体彩-| www.gg44.com-福建11选5慧扑彩| www.f81.org-3b彩票图谜汇总| www.67qw.com-化妆品彩妆全套套装| www.986418.com-tktkcc彩票-| www.952005.com-查彩票开奖号码| www.is33.com-福利彩票手机投注站| www.16dp.com-七彩国际彩票| www.5369.pw-淘宝网店卖彩票| www.53077.com-新版重庆时时彩玩法| www.0011.ren-七星体彩几点开奖| www.23657.com-竞彩网电脑版首页| www.365400.cc-体育彩票有买篮球吗| www.373721.com-体彩排3排5走势图| www.996007.com-北单彩票店-| www.517565.com-福彩3d天罡八卦图| www.84747.com-十分彩官网手机下载| www.126367.cc-创彩是干嘛的| www.zw47.com-江苏快三大小怎么算| www.26hc.com-澳门微信群发送彩金| www.023.tv-唐龙彩报电子| www.2314.wang-彩吧图库3d第五版| www.ck93.com-网上彩票代理犯法吗| 金凤凰彩票www.10113.com| www.51537.com-糖果彩兼职-| www.017184.com-吉林市彩票站出兑| www.120728.com-足球彩票提成| www.56989.cc-旺彩百家号-| www.345761.com-北京京彩学校官方网| www.727225.com-8号彩票论坛马| www.336043.com-福利彩广西双彩开奖| www.576197.com-快三稳赢法-| www.lp26.com-全民彩票官网网页版| www.qo47.com-体彩公益金比例| www.60dy.cc-彩吧图库老北京双胆| www.3163.cn-体彩任九开奖结果| www.44232.com-全民彩票网页手机版| www.97757.cc-竞彩比分推荐专家| www.077180.com-青海快三网上投注| www.0857.xyz-福彩双色球扫码查询| www.306425.com-彩688-| www.817191.com-立彩邀请码是多少| www.456558.com-创富彩色正版图库a| www.536950.com-霸气竞彩名字| www.598546.com-体育彩票的新闻| www.952420.com-k彩app注册-| www.o45.net-玩彩票wcp.cc| www.923536.com-秒速快三交流| 华亿彩www.cai001.vip| www.714342.com-中彩网福彩3d跨度| www.816733.com-吉林快三怎么样| www.878631.cc-青岛体育彩票招聘| www.332100.com-中彩网邀请码是什么| www.434163.com-最新的彩票平台源码| www.662429.com-七星彩每天几点停售| www.318295.com-快开彩玩法-| www.mw27.com-彩票店选址-| www.202802.com-福彩20选5走势图| www.933448.com-传奇彩票是真的假的|