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.tune66.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.tune66.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.tune66.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.12158.com-银鹤山人六爻彩票| www.82477.cc-香港快三app| www.003979.com-中国足彩竞猜比分| www.23859.com-彩票快3赚钱方法| www.269234.com-长城彩票是真是假| www.991967.com-彩票一组几个数| www.137630.com-彩之星娱乐平台注册| www.611452.com-长春彩票开奖| www.700177.com-彩票大发的技巧| www.779116.com-彩票3d彩报-| www.854696.com-竞彩篮球有哪些比赛| www.919631.com-时时彩网站创建| www.986513.com-足球竟彩推荐| www.zh6.com-传统彩票网站| www.tl78.com-安徽快三投注软件| www.028183.com-彩票代码是啥| www.142311.com-查北京快三开奖号码| www.229510.com-快三彩票玩法| www.318144.com-北京快福彩快三| www.410080.com-足彩竞猜投注258| www.529739.com-通吃彩票中奖| www.612223.com-彩票3d胆码-| www.712617.com-彩票店整体转让| www.799226.com-天空彩票與你同行| www.884503.com-三d双彩图-| www.967482.com-导师网络彩票| www.xw.cc-中国体彩网官方网| www.771204.com-彩虹emoji复制| www.7080.org-香港大福证券彩票部| www.vd70.com-智慧彩挂机网| www.172.la-儿童彩铅画获奖作品| www.520335.com-三号彩票官网| www.pp3.cc-新韩国快三-| www.uj54.com-大赢家彩票靠谱吗| www.20324.cc-福彩快三网赚靠谱吗| www.78773.cc-亮彩家具-| www.034699.com-50倍率彩票-| www.024628.com-加盟福利彩票挣钱吗| www.232210.com-大发快三预测| www.363007.com-福彩万能四码| www.088171.com-彩金彩票网站| www.961471.com-彩票奖金怎么算| www.604950.com-盈盈手机购彩平台| www.836409.com-福彩三弟太湖谜语| www.061908.com-彩客网能赚钱吗| www.594.me-中国福利彩票网址| www.872683.com-糖果彩app靠谱吗| www.cp0068.com-彩神8网址-| www.xf16.com-七彩官网下载| www.75fy.com-福彩今田试机号码| www.755948.com-三d彩图-| www.456433.com-中奖彩票有效期多久| www.594128.com-竞彩既时比分| www.962796.com-银河全部彩票平台| www.bv24.com-湖北体彩新十一选五| www.564765.com-时时彩双胆投注| www.667384.com-游戏彩球-| www.ii82.com-今日福彩藏机图正版| www.51ps.cc-青蛙过河福彩| www.2035.vip-青岛市体彩中心| www.315620.com-5分快三在线计划| www.546061.com-139彩票下载| www.702125.com-如何注册爱彩乐| www.833205.com-成功彩票下载软件| www.948129.com-南昌福彩兑奖中心| www.2238.net-福彩快乐彩开奖昨天| www.472345.com-彩票性原作者| www.779576.com-天空彩票与大同行| www.075130.com-梦想彩票手机版下载| www.009047.com-体彩任选5中奖规则| www.100010.com-广东省体彩中心电话| www.181858.com-安徽快三走势图表| www.484820.cc-银川千彩摸吧| www.907268.com-四个数字的彩票推荐| www.110296.com-七星彩单双尾| www.862761.com-褔彩选4-| www.634547.cc-江苏快三人工预测| www.78518.com-最可靠快三投注技巧| www.302721.com-湖北快三天天彩经网| www.01187.com-足彩赔率-| www.598473.com-彩票19035期| www.869601.com-澳客彩票网乐彩网| www.81049.com-体彩中彩网-| www.027784.com-彩票原来是骗局| www.118002.com-江苏e球彩查询| www.092194.com-今天的湖北快三| www.322147.com-足彩可以八串多少| www.487755.com-分分彩走势图软件| www.99518.com-博弈310足彩博客| www.110477.com-鸿运快三违法吗| www.177701.com-快三玩法说明| www.893087.com-快三十大秘籍| www.961905.com-下载买彩票双色球| 亚洲彩www.68568g.com| www.77474.cc-高手破解福彩3d| www.56pd.com-贵阳彩票申请网| www.294640.com-今天福彩3d水果图| www.573275.com-cp288好彩票| www.677514.com-約彩彩票-| www.51lz.com-排五彩票开奖结果| www.639064.com-申请体彩店去哪申请| www.076608.com-老梁揭秘彩票完整版| www.199675.com-体彩开奖号码今天| www.sb15.com-福彩体彩杀号定胆| www.52jc.com-足彩欧赔选择口诀| www.363583.com-甘肃快三走势跨度图| www.671443.com-福彩千禧网试机号| www.629364.com-如意彩可靠吗| www.735740.com-五分快三真正技巧| www.855067.com-深圳市福彩中心| www.914723.com-体彩乐彩网开奖号| www.984703.com-炫彩水晶泥-| www.rt35.com-乐彩下载app| www.512586.com-素描彩铅植物大全| www.129731.com-彩c02彩票-| www.238047.com-3d福利彩票下载| www.815123.com-竞彩qq群-| www.x17.club-48彩票靠谱吗| www.69sc.com-彩票至尊宝典破解版| www.493948.com-私彩靠什么挣钱| www.00qn.com-彩虹周杰伦歌词简谱| www.565893.com-彩篷盐城-| www.068123.com-彩票计划软件苹果版| www.382022.com-五行大师预测彩票| www.485454.com-赢彩网站谁建的| www.667912.com-7k彩票下载-| www.757926.com-彩票作假事件视频| www.835310.com-欧盟好彩产地| www.902260.com-福彩正版藏机图汇总| www.964851.com-浙江体彩网站| 500彩票www.50080k.com| www.124377.com-彩票历史开奖最多| www.789838.com-西宁市福彩中心地址| www.870088.com-安徽快三一天多少期| www.929141.com-安徽福彩中彩网| www.972755.com-小学彩铅画-| 多宝彩票www.75538a.com| www.905208.com-新浪竞彩足球推荐| www.968859.com-福彩3d胆码图| 大赢家彩票www.399230.com| www.209428.com-大发快三辅助器论坛| www.326371.com-七星彩上官燕预测| www.491134.com-中国彩网开奖结果| www.581602.com-吉林快三杀码定胆| www.356042.com-360足彩直播吧| www.10772.com-竞彩篮球群-| www.327842.com-福彩3d宝典图片| www.457430.com-中彩票的诗-| www.618455.com-体彩中心有多黑| www.22855.cc-52亿彩票-| www.474896.com-粤海七星彩-| www.606543.com-彩六为什么禁| www.nb71.com-腾讯分分彩回血计划| www.95ch.com-彩票下海什么意思| www.5862.xyz-易购娱乐时时彩代理| www.50xq.com-大琼鲸彩票开奖查询| www.4760.biz-下载558彩票| www.346234.com-快彩网投网站| www.456615.com-3d今彩易网-| www.550031.com-足彩倾家荡产| www.665754.com-在手机上怎么买体彩| www.755678.com-旺彩开奖软件| www.814036.com-福彩快开-| www.k30.cc-牛彩网好彩网字谜|