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.sungloryparts.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.sungloryparts.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.sungloryparts.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.285737.com-中福快三计划网址| www.837673.com-正版家家好彩| www.925776.com-香港资料彩富大全网| www.992240.com-时时彩五星定一码| www.am61.cc-七星彩走势图彩经网| www.wu12.com-彩票送彩金平台| www.29mo.com-彩铅画静物图片| www.1908.tv-北控自助彩票| www.9033.biz-时时彩软件出租| www.989019.com-微彩站官网下载安装| www.qm98.com-997彩票靠谱吗| www.771.cm-彩票3d之家-| www.9859.in-玺彩画-| www.7602.pw-下载777彩网| www.005082.com-彩民红高手论坛| www.249.in-天津福彩快乐十分钟| www.731735.com-彩钢围挡5年| www.805599.com-福彩双色球几种玩法| www.889882.com-七乐彩哪年开始发行| www.n42.top-中彩网首页福彩| www.787332.com-海南竞猜体育彩票| www.bl11.com-神州彩票可信吗| www.17.tv-各彩票平台漏洞| www.7093.biz-博创彩票网址官网| www.31057.com-有多少人彩票中奖| www.607559.com-彩票加盟热线电话| www.734557.com-广东天彩快3是什么| www.854231.com-时时彩8码复式倍投| www.964873.com-555彩票网注册| www.76500.com-全人类彩票最大奖| www.860435.com-上海快三和值遗漏| www.962681.com-彩乐乐任二遗漏| www.640012.com-大通彩票a-| www.951096.com-足彩欧赔看盘技巧| www.t93.club-彩票2元网杀号| www.788685.com-怎么看足彩投注量| www.943176.com-百胜集团彩票| www.dr5.cc-吉首商业城快三秒| www.03rz.com-菜鸟彩票真的假的| www.11708.com-如何代理彩票平台| www.056785.com-安徽福彩网站| www.82ii.com-云南彩票大奖| www.217361.com-大发快三必中软件| www.7673.biz-七乐彩三十期开奖号| www.66444.cc-淘彩娱乐平台可靠吗| www.399667.com-彩90-| www.526351.com-时时彩全包号技巧| www.201885.com-分分彩计划免费版| www.25138.cc-彩铅嘴巴教程| www.6444.in-福彩双色球选号查询| www.31827.com-重庆十分彩-| www.84255.cc-天津体育彩票app| www.530909.com-时时彩五星的秘诀| www.616014.com-一百万彩票-| www.687760.com-福利彩票官方网下载| www.785383.com-大乐彩票开奖查询| www.886039.com-彩虹有什么含义| www.cai7911.com吉林体彩网11选五| www.329955.com-快三把我给坑死啦| www.438761.com-苏州市如何加盟福彩| www.547847.com-宁夏快三软件| www.615616.com-美狮彩票怎样| www.682517.com-体彩中心官方网站| www.757708.com-福利彩票赚钱| www.826775.com-体彩店内部装修图片| www.892701.com-01彩票手机-| www.958748.com-网上赌彩票输几万| 凤凰彩票www.55228d.com| www.386691.com-精品彩软园-| www.521636.com-时时彩龙虎和怎么出| www.639242.com-北京中国福利彩票| www.707867.com-彩票签到有钱| www.779986.com-今天的福彩开奖视频| www.853111.cc-台湾威力彩票| www.920309.com-彩神争8手-| www.976274.com-新乡彩礼2018| www.bm.cc-快3彩票倍投技巧| www.989155.com-福彩3d校长推荐| www.eb93.com-彩票店营业时间| www.463.org-体彩杀码号体彩双胆| www.09708.com-山东福利彩票网官网| www.821348.com-牛彩网字谜汇总| www.893349.com-七乐彩360-| www.958865.com-98098j彩票网| 亚投彩票www.ya055.com| www.403404.com-体彩彩票生成器| www.559418.com-牛人彩票网站| www.639540.com-开一家体彩店赚钱吗| www.717079.com-安徽福彩中心领奖| www.799979.cc-新手怎么买足球彩票| www.875036.com-竞彩嘉奖app| www.941186.com-手机阿里彩票怎么买| www.997546.com-糖果彩虹糖-| www.zs1.com-福彩开奖3d走势图| www.td18.com-最新快彩中奖助手| www.315280.com-一分时时彩开奖结果| www.34nm.com-时时彩赢彩王怎么样| www.2563.vip-腾讯彩票游戏真假| www.9117.me-七乐彩开奖比较器| www.752617.com-彩票日存优惠| www.860305.com-江苏体彩快乐三| www.556901.com-七星彩今晚获奖码| www.616949.com-号百彩票网官方网站| www.692539.com-福彩3d双彩图百度| www.737077.com-上海福彩中心李強| www.314465.com-博彩怎么刷流水赚钱| www.414148.com-m5彩票注册官方网| www.69206.com-众慱彩票-| www.026573.com-澳门博彩五星| www.095219.com-中国彩票最不可信| www.005055.com-腾讯分分彩最笨买法| www.663285.com-众购彩票线路| www.55371.cc-中彩票次数最多的人| www.0085.net-菠萝彩双色球公式| www.9580.org-星彩社区-| www.6785.com-七彩影院官网下载| www.0981.cm-粤彩网合法嘛| www.4265.org-篮彩神棍区_虎扑| www.61511.cc-乐米彩票官网资讯| www.270539.com-2019年彩票开奖| www.365758.cc-彩铅自学哪本书好看| www.470633.com-足彩有赢钱的吗| www.562990.com-重庆时彩定位胆| www.759382.com-南阳彩开奖直播| www.832580.com-怎么下载七彩视界| www.888060.com-国乐彩下载-| www.42fo.com-体彩对奖规则| www.858.me-彩铅画古风眼睛| www.5517.cn-身为一道彩虹歌词| www.21uf.com-梦到买彩票号码| www.70bm.com-彩票中奖的死人| www.503993.com-体彩验票查询| www.571179.com-2m彩票牛蛙开奖直| www.652765.com-体育彩票排列七| www.705249.com-体彩竞彩怎么兑奖| www.770803.com-竞彩吧app-| www.848109.com-时时彩平台被黑钱| www.909694.com-昆明靓彩怎么样| www.982779.com-重庆福彩网官方首页| www.lv8.com-福彩甘肃快三下载| www.mn21.com-时时彩四星走势图| www.844807.com-福彩福利彩票| www.927927.com-彩票咋个买几个数| www.978902.com-河南省快三近30| www.cai83.cc-内蒙古快三-| www.1392.cm-彩票走势大全安卓版| www.48808.com-竞彩平台14场| www.85567.cc-足球体彩竞彩| www.721556.com-足彩竞彩购买网站| www.790424.com-天天中彩吧3d图迷| www.846010.com-万博app足彩下载| www.901606.com-体彩排五综合走势| www.964378.com-竞彩足球怎么| 中彩网www.71233hh.com| www.33686.cc-快三秒市桥奶茶店| www.312062.com-幸运福彩是真的假的| www.389762.com-体育彩票的区别在哪| www.499028.com-初级彩票培训师| www.055636.com-大发快三靠谱吗| www.167587.com-安徽福利快三| www.4793.cn-体彩竞彩258彩票| www.29857.com-福彩中奖在哪里兑换| www.711583.com-双色球牛彩网预测| www.866492.com-河南快三玩法图|