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.hong39.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.hong39.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.hong39.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.060176.com-彩票51破解版| www.207822.com-彩500-| www.292762.com-福彩3d杀号林竹| www.369708.com-彩8彩票官方版| www.cy71.com-快三歌曲-| www.o84.cn-彩票怎么玩规则| www.71xu.com-1998世界杯彩票| www.382279.com-彩神网买彩票安全吗| www.721773.com-北京福彩3d微信群| www.831008.com-577彩票网可靠吗| www.12102.com-爱乐透彩票下载| www.990835.com-最好的彩票挂机软件| www.iz88.com-福彩七乐彩游戏玩法| www.703967.com-新彩网i-| www.853945.com-时时彩是什么| www.948740.com-福彩3d大湖字诎| 500彩票www.202314.com| www.388323.com-下载华彩人生一点通| www.626902.com-福利彩票好运快三| www.713602.com-王者彩票苹果版下载| www.806208.com-福彩今天3d试机号| www.928719.com-彩票案-| 500彩票www.652331.com| www.cp7995.com-福彩快三十分快三| www.777020.com-手机彩播直播| www.665.cc-怎么样查看福利彩票| www.6825.biz-足彩快报英超积分榜| www.906966.com-全发彩票彩种| 天朝彩票www.82636.cc| www.711995.com-时时彩能长期盈利吗| www.nm69.com-时时彩助手挑号| www.65ll.com-彩票店中奖有提成没| www.200469.com-一定牛彩票网可靠吗| www.270723.com-欧盟好彩柠檬爆珠| www.780328.com-福利彩票咋申请| www.98ho.com-8亿彩靠谱吗| www.4181.vip-北京七彩汇国际会所| www.144734.com-竞彩足球单场分析| www.952215.com-时彩平台网址| www.37153.cc-好运来福彩-| www.936275.com-乐山快三开奖| www.961334.com-大众国际大众彩票| 大赢家彩票www.541911.com| www.715871.com-双色球彩票软件官网| www.819238.com-如何成为彩票高手| www.931561.com-728彩票下载安装| www.2810.vip-红彩彩票app| www.4411.tv-福彩刮刮乐返奖率| www.456992.com-河北彩票20选五| www.961395.com-七乐彩胆拖投注图| www.5se.com-昆明福牛牛彩票网| www.337818.com-五福彩下载安装| www.493549.com-福彩3d彩图汇总| www.779533.com-开私彩网站好做吗| www.gv50.com-彩16安卓版下载| www.i01.org-福彩七乐彩几个中奖| www.66bf.cc-cba竞彩网-| www.0874.tv-玩彩票钱提不出来| www.fq23.com-重庆体育彩票官网| www.b00.net-十字彩怎么下载| www.29vm.com-福利三分彩查询| www.3930.cn-竞彩今日过关推荐| www.633609.com-豫彩通可以买彩票吗| www.714889.com-祥云瑞彩什么意思| www.791608.com-苏宁彩票加盟吗| www.868618.com-七星彩四五位差| www.23kx.com-福星彩资料开奖结果| www.315.me-只赚不赔的彩票软件| www.520721.com-时时彩杀号方法如下| www.657943.com-三分彩开奖走势图| www.275620.com-时时彩控制开奖结果| www.04gp.com-玛雅彩票游戏手机版| www.178724.com-中国体彩网官网首页| www.261673.com-彩票送彩金38| www.954976.com-福建福彩七乐彩开奖| www.2325.xyz-海南彩票开奖号码| www.9553.wang-南国彩票开心论坛| www.to0.cc-彩票开奖结果查询奖| www.293982.com-买体彩-| www.814063.com-高频彩票开奖| www.893316.com-内蒙古体育彩票网| www.27499.com-重庆快乐十分爱彩乐| www.491402.com-彩票009网正规吗| www.593051.com-七彩阳光教学视频| 福彩网www.60007k.com| www.141838.com-彩票中砍龙技术| www.e85.top-七乐彩跨度-| www.213406.com-湖北快三官方手机版| www.300080.cc-快三速查-| www.372478.com-多赢大发快三app| www.475656.com-青海福彩中心招聘| www.550689.com-华夏彩票4595| www.731913.com-足彩19038佬牛| www.808065.com-优彩下载安装| www.882850.com-093彩票合法吗| www.980183.com-竞彩胜负平开奖结果| www.120298.com-腾讯五分彩是什么| www.740955.com-网络博彩推广话术| www.848948.com-十分快三规律| www.947163.com-35彩票害人输千万| www.25152.cc-彩铅自学难吗| www.73997.cc-新彩吧3d字画迷| www.052256.com-花式休闲快三谢俊娟| www.4pk.com-极速时时采彩怎么玩| www.158093.com-新浪网足球彩票| www.756182.com-福彩交流群是骗子| www.3531.xyz-mini彩金多少掉| www.340992.com-彩载网牛材网| www.969672.com-彩票追号技巧| www.dh39.com-彩票数理九宫八卦图| www.88198.com-英国彩票最大奖号码| www.057063.com-七乐彩历史出球顺序| www.680625.com-宁夏体彩网查询结果| www.771115.cc-老时时彩走势360| www.944163.com-大发云致富彩票| www.08895.cc-福彩3d天天中彩票| www.365428.cc-新起点彩票抢红包| www.464629.com-时时彩倍数是多少| www.554423.com-慱发彩票是哪里的| www.659922.com-顺盈彩票是真的假的| www.91yr.com-彩票工资车有哪些| www.5301.cm-国民彩票时时彩| www.11139.cc-足彩推荐在哪里好| www.72248.com-云南彩票弃奖| www.661337.com-彩票套利是什么意思| www.6680.cc-福彩积分扫一扫官方| www.29290.cc-彩虹瓶颜色搭配图片| www.73488.cc-微信群买彩票可靠吗| www.542470.com-江苏快三豹子2| www.702368.com-好彩客二肖二码| www.778764.com-彩票小助手登录| www.853048.com-香港有彩票店吗| www.913980.com-安卓彩票228| www.971778.com-快捷彩票网是真是假| www.eg5.com-彩票app下载快三| www.76644.cc-好彩一八今期现| www.822307.com-随州福利彩票| www.885061.com-51彩票苹果版| www.sl7.com-重庆时时彩骗局| www.qc52.com-幸运快三怎么玩法| www.66yd.com-优游彩票ub8| www.0794.me-118彩票安桌下载| www.267186.com-足彩第19024期| www.rc5.cc-福彩开奖25选5| www.117929.com-江苏e球彩直播| www.785211.com-3d彩票字谜今天| www.6550.wang-lg彩票是什么彩| www.18055.cc-福利彩票旺旺年| www.378287.com-彩虹e台在线播放| www.586221.com-七乐彩最准预测| www.678327.com-博彩论坛17500| www.9148.biz-亿彩堂用户注册| www.64950.com-彩钢贴吧-| www.906036.com-国彩网投怎么玩| www.964278.com-快三怎么计算公式| www.cai3456.com彩票破解术-| www.66585.com-彩票神器高手网| www.777628.com-福彩双色球复式预测| www.915180.com-淘宝上买彩票怎么买| www.967784.com-银川彩票转让| www.2wq.cc-手机黑彩怎么运行| www.181051.com-快三单双关系加减一| www.283795.com-七星彩游戏规则详情| 盛彩网www.41518s.com|