jquery制作Popuptools.js插件功能二之弹出视频教程

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2015-12-31 15:51:58　-　阅:　-　评:0　-　积分:0

摘要：
　　昨天艺灵分享了一款弹出插件Popuptools.js并展示了一个弹出图片的案例，今天艺灵将继续分享关于此插件的功能。今天我们来学习如何弹出视频......

艺灵昨天分享了jquery教程:多功能弹出窗口特效插件Popuptools.js并留下的作业，不知道看官有没有做出来，没做出来也没关系。今天艺灵将来讲解下关于弹出视频的教程。

我们先来看下昨天是如何弹出图片的吧。

一、回顾弹出图片源码

1.引入弹出插件

<!--引入jquery库。此库版本必须要大于1.7+，如果页面中已引入，可忽略此库-->
<script src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8" ></script>
<!--引入Popuptools.js插件-->
<script src="http://www.yilingsj.com/skin/yilingsj/demojs/Popuptools/Popuptools.js" type="text/javascript" charset="utf-8"></script>

2.html框架

<!--触发弹出按钮-->
<span class="demo-btn1" data-config='{type:"，分别是：img(图片)、embed(视频)、html(自定义内容)",src:"对应类型的地址，当type为img或embed时，这里填写对应的地址；",title:"标题，例如：扫一扫关注xx微信号",width:"弹出框架宽度，eg:500",height:"弹出框架高度，eg:300",oldwidth:"弹出图片原始宽度，eg:800",oldheight:"弹出图片原始高度，eg:600"}' title="点击图片查看原图" >点我弹出二维码</span>
<!--待弹出框架-->
<div class="pop-gybg " style="display: none;"></div>
　<div class="popup-w demo1" style="display: none;">
　　<div class="pop-box-w" >
　　　<!--预留用户内容-->
　　</div>
　<div class="pop-gydel gydel" title="关闭按钮" >×</div>
</div>

3.jquery调用插件

<script type="text/javascript">
$(function(){
　$('.demo-btn1').Popuptools({
　　pop_bg:".pop-gybg", 			     /*公用半透明背景*/
　　pop_parent:".demo1", 				 	/*弹出元素的最外层*/
　　pop_box:".pop-box-w", 				 	/*弹出元素的父级*/
　　pop_on:"pop_on", 				 	/*预留激活样式*/
　　pop_hide:"o-y",  					  /*隐藏浏览器滚动条*/
　　pop_imgclass:"pop-B-img",         //弹出时显示的元素样式名(img,embed,other)
　　pop_msgclass:"pop-msg",					//提示信息的类名
　　pop_type:0,							//0：弹出+关闭功能，1：只有关闭功能
　　pop_bgqp:1,                      //0表示半透明背景不全屏，1表示全屏
　　pop_m_type:0,					    //0：隐藏提示信息，1：显示提示信息
　　pop_effect:0,               		//切换类型0:show+hide;1:fadeIn+fadeOut;2:slideDown+slideUp;3:addclass;4.display;
　　pop_hidetime:300,                /*消失时间*/
　　pop_showtime:300,                /*显示时间*/
　　pop_padding:10,						/*弹出盒子填充值*/
　　del_this:".pop-gydel" 				 //关闭按钮class
　});
});
</script>

这里我们只需要修改两处，分别是：type、src，修改后即可弹出视频。

当然了，看官也可以接着设置视频的标题、宽度等信息。为了照顾不是很明白的看官，下面附案例，修改过的地方会以红色高亮表示，其它地方均为昨天弹出图片的源码。

二、Popuptools.js插件弹出视频demo

demo演示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Popuptools.js插件功能二：弹出视频</title>
<meta name="Keywords" content="jquery弹出层插件,jquery弹出框插件,jquery教程,弹出窗口特效,Popuptools.js,窝窝宝" />
<meta name="author" content="艺灵设计，www.yilingsj.com"/>
<link rel="stylesheet" type="text/css" href="http://www.yilingsj.com/skin/yilingsj/demojs/Popuptools/Popuptools.css"/>
</head>
<body>
<div class="demo-w">
　<h1>Popuptools.js插件功能二：弹出视频</h1>
　<p>弹出类型：embed<br>弹出特效：show+hide</p>
　<br />
　<br />
　<br />
　<span class="demo-btn1" data-config='{type:"embed",src:"https://cloud.video.taobao.com//play/u/759415648/p/2/e/1/t/1/27716597.swf",title:"制作“马尔杜克”导航特效(精简版)--艺灵设计",width:"800",height:"500",oldwidth:"250",oldheight:"250"}' >点我弹出视频</span>
</div>
<div class="pop-gybg " style="display: none;"></div>
　<div class="popup-w demo1" style="display: none;">
<div class="pop-box-w" >
　　　<!--预留用户内容-->
　　</div>
　<div class="pop-gydel gydel" title="关闭" >×</div>
</div>
<!--引入jquery库。此库版本必须要大于1.7+，如果页面中已引入，可忽略此库-->
<script type="text/javascript" charset="utf-8" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<!--引入Popuptools.js插件-->
<script type="text/javascript" charset="utf-8" src="http://www.yilingsj.com/skin/yilingsj/demojs/Popuptools/Popuptools.js" ></script>
<script type="text/javascript">
$(function(){
　$('.demo-btn1').Popuptools({
　　pop_bg:".pop-gybg",　　　　　　　　/*公用半透明背景*/
　　pop_parent:".demo1",　　　　　　　　　/*弹出元素的最外层*/
　　pop_box:".pop-box-w",　　　　　　　　　/*弹出元素的父级*/
　　pop_on:"pop_on-embed",　　　　　　　　　/*预留激活样式*/
　　pop_hide:"o-y",　　　　　　　　　　/*隐藏浏览器滚动条*/
　　pop_imgclass:"pop-B-embed",　　　　　/*预留弹出(img,embed)时显示的样式名*/
　　pop_msgclass:"pop-msg",　　　　　　　　/*提示信息的类名*/
　　pop_m_type:1,　　　　　　　　　　　/*0：隐藏提示信息，1：显示提示信息*/
　　pop_type:0,　　　　　　　　　　　　/*0：弹出+关闭功能，1：只有关闭功能*/
　　pop_bgqp:1,　　　　　　　　　　　　　/*0表示背景不全屏，1表示全屏*/
　　pop_effect:0,　　　　　　　　/*切换类型0:show+hide;1:fadeIn+fadeOut;2:slideDown+slideUp;3:addclass;4.display;*/
　　pop_hidetime:300,　　　　　　　　/*消失时间*/
　　pop_showtime:300,　　　　　　　　/*显示时间*/
　　pop_padding:10,　　　　　　　　　/*弹出盒子填充值*/
　　del_this:".pop-gydel"　　　　　　/*关闭按钮class*/
　});
});
</script>
</body>
</html>

点击上面的“运行代码”后可在新页面中看到预期的效果，效果截图： Popuptools.js插件功能二之弹出视频截图

怎么样，是不是很方便，基本上代码没有做什么修改。上面红色高亮的代码表示有修改，看官试着理解下吧。

三、5种不同效果的弹出视频demo

还是跟昨天一样，艺灵会附一个完整版的demo演示，包括：0:show+hide、1:fadeIn+fadeOut、2:slideDown+slideUp、3:addclass+removeClass、4.display这5种不同的展示效果。

demo演示

demo演示更换pop_effect的值可看到不一样的效果哦！案例猛戳→→→→→

至于如何弹出自定义html，看官可在下面自己练习，艺灵明日会写相关教程文章，敬请期待。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2015-12-31/354.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！