织梦网站：视频弹出播放JS+CSS

最新推荐文章于 2021-05-30 20:47:40 发布

weixin_30500105

最新推荐文章于 2021-05-30 20:47:40 发布

阅读量302

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/qingpingseo/p/6379399.html

版权

需要 jquery.js 文件，JS代码一定要放在HTM下面，否则没效果罗！！！

CSS代码：

1.fdspbf{ width:650px; height:550px; position:fixed; left:50%; top:50%; margin:-265px 0 0 -315px; background:url(../images/ico_navbjh.png) repeat; padding:10px; z-index:99;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
2.fdspbf .spclose{ position:absolute; right:5px; top:5px; width:15px; height:15px; background:url(../images/ico_close.png) no-repeat; cursor:pointer;}

HTM代码：

1.<a href="javascript:void(0)" class="spbf" data-sp="http://cache.tv.qq.com/qqplayerout.swf?vid=z03002cxted">弹出播放</a>
2
 
3
 
4.http://static.video.qq.com/TPout.swf?vid=z03002cxted&auto=1

JS代码：

$('.spbf').each(function(index) {
$(this).click(function() {
$("body").append('<div class="fdspbf"><span class="spclose"></span><iframe height="100%" width="100%" src="'+$(this).attr("data-sp")+'" frameborder=0 allowfullscreen></iframe></div>');
$(".spclose").click(function() {
$(".fdspbf").remove();
});
});
});

转载于:https://www.cnblogs.com/qingpingseo/p/6379399.html