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.xhkyy.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.xhkyy.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.xhkyy.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.572367.com-广州好彩玩贝厂| www.97785.cc-彩光嫩肤仪-| www.64jx.com-众彩网快三是真是假| www.8234.com-500竞彩比分网| www.979945.com-顶级彩票票主页| www.252026.com-旺彩软件下载| www.702985.com-彩票3d结果-| www.834579.com-赢彩彩票安全吗| www.496170.com-足彩西西-| www.022026.com-彩神v111app| www.169820.com-吉林省快三开奖查询| www.288248.com-类似彩名堂app| www.522341.com-彩风暴金90后| www.no57.com-福彩选号助手老款| www.746425.com-酷彩吧可靠吗| www.661975.com-竞彩8串9怎么买| www.750672.com-70彩票平台安全吗| www.836535.com-牛蛙彩四不像彩图| www.907234.com-中国福彩快乐十分钟| www.259473.com-福利彩票幸运选号| www.350808.com-手机彩膜数据| www.801373.com-百胜快3彩票| www.875974.com-淘宝快三数据| www.947559.com-玩彩人-| www.997934.com-分分快三赢钱方法| www.ip37.com-14场胜负彩预测| www.196185.com-爱彩乐5分快3规律| www.t38.org-宝宝计划彩票软件| www.9618.win-3d专家杀号彩经网| www.81ju.com-广西新粤彩报纸| www.92763.com-立彩彩票欺骗| www.872593.com-福利彩票时时彩结果| www.993631.com-足彩奖池是多少| www.fa66.com-河北快三历史开奖号| www.0bb.cc-竞彩卖料-| www.0708.com-彩票中的ag是什么| www.603801.com-足彩澳客网下载| www.832920.com-机选买彩票能中奖吗| www.477466.com-彩神通六会四码| www.588879.com-旺彩软件下载ios| www.678932.com-彩金是什么游戏| www.764511.com-天天彩票正规不| www.838382.com-江苏快三人为控制吗| www.921969.com-365彩票安卓| www.7389.loan-竞彩违法么-| www.6289.biz-新湖北竞彩快三| www.23461.com-7728彩票骗局| www.ra79.com-时时彩女赌徒| www.29zd.com-全民彩票代理邀请码| www.829992.com-娱乐游戏首存送彩金| www.cai1950.com河南快三推荐号| www.232657.com-上海快三介绍玩法| www.0460.cc-零零彩票-| www.106550.com-足彩有哪些玩法| www.222870.com-四川快三查询| www.371399.com-彩票站转让合同无效| www.535949.com-银行购彩-| www.625531.com-专业购彩首页| www.876311.com-重庆时彩时彩下载| www.975662.com-七星彩2292-| www.04ql.com-七乐彩出球顺序号码| www.657638.com-彩票杀号专家最准确| www.320584.com-七乐彩今天-| www.628735.com-龙岩体彩中心| www.196159.com-北京快三玩法规则| www.295108.com-贵州福彩兑奖地址| www.413746.com-合肥福彩开奖结果| www.922690.com-彩客竞彩app下载| www.to2.cc-南昌福彩网-| www.539.site-中国体彩网下载| 博友彩www.739908.com| www.09605.com-福彩3g资讯-| www.109538.com-京彩挂机-| www.200713.com-查询福利彩票双色球| www.293083.com-易彩快三计划群| www.550859.com-玩彩需要什么心态| www.715477.com-快速挣钱的彩票| www.926592.com-双色球彩票价格| www.zx73.com-彩22app下载| www.151261.com-购彩8816-| www.132560.com-18137期足彩| www.306538.com-9d彩票-| www.8mm.cc-体育彩票机专用键盘| www.702513.com-福利彩票天天彩选4| www.779944.com-福彩3d视频教程| www.107377.com-80彩app下载| www.903706.com-福彩三的开机号今天| www.365807.cc-时时彩单双技术| www.cx5.com-体育彩票发行宗旨| www.7798.tv-足彩稳定盈利模式| www.597828.com-幻彩褪黑晚霜香港| www.662951.com-彩票天天选四开奖| www.727739.com-幸运28正规彩票的| www.801966.com-彩吧彩票购彩平台| www.876221.com-365约彩提现| www.938041.com-双赢彩票平台可靠吗| www.984285.com-买2分彩有什么技巧| www.jn20.com-江苏快三输了十几万| www.17xm.com-西安苏宁体彩智慧| www.45282.com-中彩网88-| www.ba06.com-内蒙古福利彩票网址| www.t43.cc-武汉市福利彩票站| www.5033.biz-快三兑奖期限多久| www.339808.com-香港乐和彩518| www.445954.com-网易彩票提现手续费| www.540875.com-竞彩早上几点开售| www.629977.com-美国彩票最大奖号码| www.689389.com-51彩票网站-| www.yj10.com-福利彩票投注| www.c86.com-如何注册百宝彩视| www.540127.com-助赢彩票软件苹果版| JJ彩票www.31930.cc| www.347197.com-计算快三技巧| www.789061.com-足彩竞猜胜负下载| www.861721.com-时时彩开奖改变| www.921414.com-彩票中奖指南电子书| www.971131.com-手机360彩票下载| 彩69www.091150.com| www.231790.com-七乐彩基本走势图| www.329415.com-天天中彩票升级版| www.393115.com-9亿9彩票网-| www.92233.com-立彩怎么样-| www.75jf.com-足彩不输不赢的方法| www.733465.com-体彩时时彩走势图| www.876900.com-买体彩大乐透方法| 3668彩票www.3668u.com| www.pa21.com-福彩20选5玩法| www.07097.com-728彩-| www.lp97.com-中彩网能提现金吗| www.31hi.com-全天彩网址-| www.287823.com-快3彩票单-| www.214752.com-彩乐漂北京足彩单场| www.336672.com-高频彩平台出租价格| www.t75.com-如何拉人玩彩票| www.025751.com-内蒙福彩在哪下载了| www.5352.biz-做梦梦到买彩票中奖| www.110045.com-北京福利彩票有哪些| www.207827.cc-时时彩缩水专用工具| www.7069.pw-可以网络购彩吗| www.11388.com-五线选号法福彩3d| www.0ry.com-大发快三乐彩网| www.220463.com-中彩网彩票-| www.317585.com-可以做职业彩民吗| www.491345.com-澳博彩票01302| www.28eu.com-491cc彩票-| www.766780.com-上海天天彩选四奖号| www.866249.com-福彩快三豹子多少钱| www.940278.com-吉林快三手机| www.23392.com-江西体彩购彩客户端| www.852224.com-体彩七位数中奖条件| www.953236.com-8亿彩是正规平台吗| www.9898.in-澳洲彩票大奖| www.58622.com-福利彩票申请代销点| www.736892.com-福彩三d今天晚| www.818769.com-幸运5星彩票| www.881168.com-赢家彩票邀请码多少| www.945843.com-乐米彩票注册| www.980122.com-竞彩让球胜平负推荐| 大赢家彩票www.599474.com| www.572955.com-湖快三走势图彩乐乐| www.658728.com-代买彩票淘宝| www.720544.com-七星彩幸运机选| www.775729.com-卖彩票的网名大全| www.7821.loan-腾讯分分彩投注|