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.wzztx.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.wzztx.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.wzztx.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.742234.com-比较靠谱的购彩软件| www.954112.com-好彩1871新加坡| www.mo43.com-复式彩票中奖计算| www.92vt.com-网上购彩违法事件| www.273307.com-甘肃体彩app| www.133675.com-易旺彩票正规吗| www.sn99.com-排列五星彩开奖| www.661716.com-刷彩票单是什么意思| www.wy57.com-特区彩票伦坛| www.6523.biz-巴西3分彩开奖网址| www.37099.cc-湖南省体育彩票| www.60ke.com-易记彩票是真的吗| www.ts36.cc-篮球彩票软件哪个好| www.16hv.com-秦皇岛福彩-| www.941107.com-北京彩票旗舰网论坛| www.zm4.cc-5d彩票规则介绍| www.o86.org-彩票规则介绍双色球| www.278339.com-优信彩票大厅| www.0419.pw-好运来彩票网站登录| 双彩网www.629012.com| www.89mx.com-足彩小四博客| www.58188.com-大奖网彩-| www.841685.com-竞彩与外围之间对冲| www.964851.com-浙江体彩网站| www.wf36.com-彩44彩票-| www.466.com-快三号码选择| www.766157.com-永9购彩票是真是假| www.966219.com-彩发发官方网站| www.sm2.com-江苏快三顺口溜| www.4682.biz-稳哥七星彩预测| www.278626.com-齐鲁彩票欢迎您| www.177047.com-三分快三平台| www.q84.com-彩票排5走势图| www.933441.com-五分彩怎么样看走势| 乐彩网www.3416e.com| www.363984.com-彩虹的颜色顺序| www.392813.com-彩铅画图片动漫画| www.508298.com-福彩体彩开机号| www.bu23.com-甘肃福彩汇总图| www.1609.me-七彩论坛-| www.847003.com-体彩申请条件| www.82881.com-竞彩二串一-| www.166205.com-快三开奖结果查询| www.872683.com-糖果彩app靠谱吗| www.fu3.com-时时彩开奖记录| www.458234.com-没钱买彩票能中奖吗| www.057059.com-出售彩票源码| www.503816.com-江苏快三投注计划表| www.19dr.com-私彩量刑-| www.5844.vip-童神彩网高手榜| www.622650.com-双色球福彩双色球| www.938790.com-亿彩真的可以提现吗| www.846.tv-极速快三稳定计划| www.559049.com-内蒙古的福彩| www.596127.com-福彩3d精确八卦图| www.bd07.com-私彩平台漏洞| www.570300.com-体彩第18154期| www.857289.com-网上买体彩行吗| www.922009.com-赢彩争霸8-| www.977209.com-彩妆项目加盟| www.cp3128.com-单机快三游戏| www.095357.com-福利彩票的营销策划| www.192805.com-彩票能买吗-| www.268953.com-3分彩的官网| www.336816.com-买彩票如何中大奖| www.103566.com-福彩直播开奖视频直| www.262456.com-皇都彩票苹果版| www.745820.com-如何下载冀彩宝| www.189404.com-uu快3手机购彩| www.908535.com-注册彩票站-| www.781119.com-彩票赢钱20-| www.38su.com-杭州体彩网征召中标| www.la2.cc-苏州快三今天开奖| www.309052.com-大马4d彩票-| www.423856.com-下载彩虹地界| www.576041.com-c777彩票官网| www.670292.com-中国哪种彩票最公正| www.cp0508.com-快三开挂作弊下载| www.250716.com-彩票app合集| www.637608.com-彩虹6多少钱| www.716058.com-赌彩票的软件有哪些| www.795255.com-福彩怎么领奖的| www.867997.com-七星彩图库图片| www.931560.com-体彩大乐透论坛| www.981886.com-爱彩人app下载| www.is.com-江苏福彩快三手机版| www.8666.me-新福彩3d字谜总汇| www.062656.com-8k彩票稳赚群| www.190510.com-河北省快三出奖| www.793089.com-彩票平刷赚钱技巧| www.963037.com-彩乐乐专家杀号推荐| www.cai95.com-快三彩票骗局揭秘| www.dt47.com-彩之王app-| www.9966.net-中彩网三地-| www.227151.com-彩吧中国彩吧| www.200311.com-123高手彩票| www.264500.com-购彩票网众-| www.274041.com-足彩串玩法介绍| www.977487.com-彩妆超市加盟| www.162379.com-叫停足彩-| www.474422.com-足彩历史奖金查询| 尊彩www.030953.com| www.9000.name-乾特商城火箭彩票网| www.715228.com-网购彩票安全吗| www.938580.com-双赢彩票开奖| www.g88.org-体彩19019-| www.7589.xyz-爱盈彩合法吗| www.787576.com-湖北快三稳赚计划| www.914778.com-爱购彩票下载| www.zs9.com-彩票双色球开奖| www.770026.com-七彩西游记在线观看| www.926938.com-红旗彩票手机app| 大赢家彩票平台www.081502.com| www.cu09.com-彩神app是真假| www.01la.com-梦兆七星彩图册| www.am20.cc-快三所有号码表图片| www.cl21.com-浙江有快三吗| www.cai2988.com快三是啥东西| www.531835.com-生命没有彩排| www.589219.com-七星彩冷热-| www.669430.com-彩票什么时候实名制| www.80va.com-今天福利彩票式机号| www.228055.com-河南安阳彩礼价目表| www.91996.com-顺丰丰彩是干什么的| www.580326.com-彩票弃奖中奖故事| www.867509.com-彩票图谜牛彩网| www.05ec.com-福彩易点彩票网| www.861356.com-福彩三d藏机图正版| www.766993.com-竞彩网比分直播直播| www.18bc.cc-亿网彩票客户端| www.559538.com-三d彩宝网开机号| www.071609.com-11选5彩票微信群| www.668928.com-国外彩票中奖| www.929331.com-安徽阜阳体彩中心| www.990806.com-彩77官网下载苹果| www.fq42.com-福彩快三贵州| www.706810.com-时时彩预测下期号码| www.db21.com-吉林快三软件| www.45hb.com-彩虹电影台免费| www.520464.com-2元彩票开奖结果| www.328323.com-彩吧44462-| www.085152.com-彩之源平台怎么下载| www.134767.com-白菜网送彩金交流群| www.757065.com-全民彩是骗局吗| www.096622.com-彩票到底有没有规律| www.86dm.com-福彩3d单双走势图| www.7356.org-体彩双色球中奖号码| www.309053.com-彩票专家榜-| www.370753.com-彩进娱乐黑钱| www.487700.com-佛山福利彩票加盟| www.561703.com-彩鸿-| www.629893.com-红彩会登录手机版| www.700939.com-彩彩票开奖-| www.471762.com-台湾五分彩开奖软件| www.233131.com-足彩北单比分| www.287108.com-福利彩票站转让| www.761662.com-彩票l之家-| www.57mx.com-大乐透大奖网易彩票| www.02we.com-印象彩票-| 购彩之家www.gczj3.com| www.771029.com-彩虹七号游戏多少钱| www.906056.com-好看彩色的东西| www.970113.com-刮刮彩票-| www.hc34.com-8彩app-|