您的位置:首页 > 其它

弹出窗播放视频(多个视频文件)

2018-03-23 11:11 260 查看
控制器: public function video(){
//分类详情
$cid = M("Conclass")->where(array('conclassname'=>'视频锦集'))->getField("id");
$newsdata = $this->getNews($cid,1,0,0,1,10);
$this->assign("newsdata",$newsdata);
$this->display();
}

public function getVideo(){
$tid = I("id");
// M("Content")->execute("update tp_content set hits=hits+1 where id=$id");
if($tid>0){
$data = M("Content")->where("id=$tid")->find();
}
$this -> ajaxReturn($data);
}video.php<head>
-------------------------------------------------------------------------------------------------------
<script src="__CN__/js/jq.box.js"></script>
<style type="text/css">
    #alert_main p{
        margin: 0px auto;
        width: 660px;
        height: 460px;
    }
 
</style>
</head>
---------------------------------------------------------------------------------------------------------
<div class="w1100 movie_ul">
<ul class="cf">
<volist name="newsdata" id="vo">
<li class="fl">
<a href="javascript:;" class="click_mov" onclick="showVideo(<{$vo.id}>)">
<img src="__PUBLIC__/Uploads/Content/<{$vo.conphoto}>" width="350" height="220" class="movie_pro" />
<h1><{$vo.title}></h1>
</a>
</li>
</volist>
</ul>
<div class="page">
<{$page}>
</div>
</div>
<script language="javascript">
function showVideo(pId){
$.post("<{:U('Beauti/getVideo')}>", { "id":pId },function(data){
$(".alert_name").text("");
$(".alert_main").text("");
$(".alert_name").append(data.title);
$(".alert_main").append(data.concon);
} );
}
</script>
<div class="alert">
<div class="alert_title tc">
<h1 class="alert_name"></h1>
<img src="__CN__/images/close.png" class="close_content" />
</div>
<div class="alert_main">

</div>
</div>jq.box.js/*
* wjybox.js
* 版权属于原作者,此处进行了优化,修改。
* 2013-09-03 #分离样式,结构调整;整理出默认样式,添加api参数style
*/
(function($) {
//给页面装载CSS样式
var css = '<style type="text/css">' +
'#wjyBlank{position:absolute;z-index:9999;left:0;top:0;width:100%;height:0;background:black;}' +
'.wrap_out{position:absolute;z-index:9999;}' +
'.wrap_remind{width:16em;padding:30px 40px;}' +
'.wrap_remind p{margin:10px 0 0;}' +
'.submit_btn{display:inline-block;padding:3px 12px 1.99px;background:#48
4000
6aaa;border:1px solid;border-color:#a0b3d6 #34538b #34538b #a0b3d6;color:#f3f3f3;line-height:16px;font-size:12px;cursor:pointer;overflow:visible;}' +
'.submit_btn:hover{text-decoration:none;color:#ffffff;}' +
'.cancel_btn{display:inline-block;padding:3px 12px 1.99px;background:#eee;border:1px solid;border-color:#f0f0f0 #bbb #bbb #f0f0f0;color:#333;line-height:16px;cursor:pointer;overflow:visible;}' +
'.wrap_close{cursor:pointer;}' +
'</style>';
$("head").append(css);
var style = '<style title="style_default" type="text/css">' +
'.wrap_out{padding:5px;background:#eee;box-shadow:0 0 6px rgba(0,0,0,.5);-moz-box-shadow:0 0 6px rgba(0,0,0,0.5);-webkit-box-shadow:0 0 6px rgba(0,0,0,.5);}' +
'.wrap_in{background:#fafafa;border:1px solid #ccc;}' +
'.wrap_bar{background:#f7f7f7;line-height:26px;}' +
'.wrap_title{display:inline-block;margin-left:10px;cursor:text;}' +
'.wrap_close{float:right;margin-right:10px;color:#999;font-weight:bold;text-decoration:none;cursor:pointer;font-size:1.5em;}' +
'.wrap_close:hover{text-decoration:none;color:#f30;}' +
'.wrap_body{border-top:1px solid #ddd;background:white;}' +
'</style>';

$.fn.wjybox = function(options) {
return this.each(function() {
var s = $.extend({}, wjyboxDefault, options || {});
var node = this.nodeName.toLowerCase();
if (node === "a" && s.ajaxTagA) {
$(this).click(function() {
var href = $.trim($(this).attr("href"));
if (href) {
if (href.indexOf('#') >= 0) {
$.wjybox($(href), options);
} else if (/[\.jpg\.png\.gif\.bmp\.jpeg]$/i.test(href)) {
//加载图片
$.wjybox.loading(options);
var myImg = new Image(), element;
myImg.onload = function() {
var w = myImg.width, h = myImg.height;
if (w > 0) {
var element = $('<img src="'+href+'" width="'+w+'" height="'+h+'" />');
$.wjybox(element, options);
}
};
myImg.onerror = function() {
//显示加载图片失败
var element = $('<div class="wrap_remind">图片加载失败!</div>');
$.wjybox(element, options);
};
myImg.src = href;
} else {
$.wjybox.loading(options);
$.get(href, {}, function(data) {
$.wjybox(data, options);
});
}
}
return false;
});
} else {
$.wjybox($(this), options);
}
});
};

$.wjybox = function(elements, options) {
if (!elements) {
return;
}
var s = $.extend({}, wjyboxDefault, options || {});
//弹框的显示
var WRAP = '<div id="wjyBlank" onselectstart="return false;"></div><div class="wrap_out" id="wrapOut"><div class="wrap_in" id="wrapIn"><div id="wrapBar" class="wrap_bar" onselectstart="return false;"><a href="javascript:;" class="wrap_close" id="wrapClose">'+s.shut+'</a><span class="wrap_title"><span>'+s.title+'</span></span></div><div class="wrap_body" id="wrapBody"></div></div></div>';
if ($("#wrapOut").size()) {
$("#wrapOut").show();
if (s.bg) {
$("#wjyBlank").show();
} else {
$("#wjyBlank").hide();
}
} else {
$("body").append(WRAP);
}

if (typeof(elements) === "object") {
elements.show();
} else {
elements = $(elements);
}
//一些元素对象
$.o = {
s: s,
ele: elements,
bg: $("#wjyBlank"),
out: $("#wrapOut"),
bar: $("#wrapBar"),
clo: $("#wrapClose"),
bd: $("#wrapBody")
};
//装载元素
$.o.bd.empty().append(elements);
if ($.isFunction(s.onshow)) {
s.onshow();
}
//尺寸
$.wjybox.setSize();
//定位
$.wjybox.setPosition();

if (s.fix) {
$.wjybox.setFixed();
}
if (s.drag) {
$.wjybox.drag();
} else {
$(window).resize(function() {
$.wjybox.setPosition();
});
}
if (!s.bar) {
$.wjybox.barHide();
} else {
$.wjybox.barShow();
}

//加载默认样式
if (!s.style) {
$.wjybox.styleHide();
} else {
$.wjybox.styleShow();
}

if (!s.bg) {
$.wjybox.bgHide();
} else {
$.wjybox.bgShow();
}
if (!s.btnclose) {
$.wjybox.closeBtnHide();
} else {
$.o.clo.click(function() {
$.wjybox.hide();
return false;
});
}
if (s.bgclose) {
$.wjybox.bgClickable();
}
if (s.delay > 0) {
setTimeout($.wjybox.hide, s.delay);
}

};

$.extend($.wjybox, {
getSize: function(o) {
//获取任意元素的高宽
var w_h = {}, o_new = o.clone();
$('<div id="wrapClone" style="position:absolute;left:-6000px;"></div>').appendTo("body").append(o_new);
w_h.w = $("#wrapClone").width();
w_h.h = $("#wrapClone").height();
$("#wrapClone").remove();
return w_h;
},
setSize: function() {
if (!$.o.bd.size() || !$.o.ele.size() || !$.o.bd.size()) {
return;
}
//主体内容的尺寸
var bd_w = parseInt($.o.s.width, 10), bd_h = parseInt($.o.s.height, 10);
if (!bd_w || bd_w <= 0 ) {
var x_size = $.wjybox.getSize($.o.ele), w = $(window).width();
//宽度自动
bd_w = x_size.w;
if (bd_w < 50) {
bd_w = 120;
} else if (bd_w > w) {
bd_w = w - 120;
}
}
$.o.bd.css("width", bd_w);
$.o.out.css("width", bd_w+2);
if (bd_h > 0) {
$.o.bd.css("height", bd_h);
}
return $.o.bd;
},
setPosition: function(flag) {
flag = flag || false;
if (!$.o.bg.size() || !$.o.ele.size() || !$.o.out.size()) {
return;
}
var w = $(window).width(), h = $(window).height(), st = $(window).scrollTop(), ph = $("body").height();
if (ph < h) {
ph = h;
}
$.o.bg.width(w).height(ph).css("opacity", $.o.s.opacity);
//主体内容的位置
//获取当前主体元素的尺寸
var xh = $.o.out.outerHeight(), xw = $.o.out.outerWidth();
var t = st + (h - xh)/2, l = (w - xw)/2;

if ($.o.s.fix && window.XMLHttpRequest) {
t = (h - xh)/2;
}
if (flag === true) {
$.o.out.animate({
top: t,
left: l
});
} else {
$.o.out.css({
top: t,
left: l,
zIndex: $.o.s.index
});
}
return $.o.out;
},
//定位
setFixed: function() {
if (!$.o.out || !$.o.out.size()) {
return;
}
if (window.XMLHttpRequest) {
$.wjybox.setPosition().css({
position: "fixed"
});
} else {
$(window).scroll(function() {
$.wjybox.setPosition();
});
}
return $.o.out;
},
//背景可点击
bgClickable: function() {
if ($.o.bg && $.o.bg.size()) {
$.o.bg.click(function() {
$.wjybox.hide();
});
}
},
//背景隐藏
bgHide: function() {
if ($.o.bg && $.o.bg.size()) {
$.o.bg.hide();
}
},
//背景层显示
bgShow: function() {
if ($.o.bg && $.o.bg.size()) {
$.o.bg.show();
} else {
$('<div id="wjyBlank"></div>').prependTo("body");
}
},
//标题栏隐藏
barHide: function() {
if ($.o.bar && $.o.bar.size()) {
$.o.bar.hide();
}
},
//标题栏显示
barShow: function() {
if ($.o.bar && $.o.bar.size()) {
$.o.bar.show();
}
},
//关闭按钮隐藏
closeBtnHide: function() {
if ($.o.clo && $.o.clo.size()) {
$.o.clo.hide();
}
},
//不加载默认样式
styleHide: function() {
return true;
},
//加载默认样式
styleShow: function() {
var style_obj = $("style[title='style_default']");
if (style_obj.length > 0) {
return true; //存在不另外加载
}else {
$("head").append(style);
}
},
//弹框隐藏
hide: function() {
if ($.o.ele && $.o.out.size() && $.o.bg.size() && $.o.out.css("display") !== "none") {
if ($.o.s.protect && (!$.o.ele.hasClass("wrap_remind") || $.o.ele.attr("id"))) {
$.o.ele.clone().hide().appendTo($("body"));
}
$.o.out.fadeOut("fast", function() {
$(this).remove();
if ($.isFunction($.o.s.onclose)) {
$.o.s.onclose();
}
});
$.o.bg.fadeOut("fast", function() {
$(this).remove();
});
}
return false;
},
//拖拽
drag: function() {
if (!$.o.out.size() || !$.o.bar.size()) {
$(document).unbind("mouseover").unbind("mouseup");
return;
}
var bar = $.o.bar, out = $.o.out;
var drag = false;
var currentX = 0, currentY = 0, posX = out.css("left"), posY = out.css("top");
bar.mousedown(function(e) {
drag = true;
currentX = e.pageX;
currentY = e.pageY;
}).css("cursor", "move");
$(document).mousemove(function(e) {
if (drag) {
var nowX = e.pageX, nowY = e.pageY;
var disX = nowX - currentX, disY = nowY - currentY;
out.css("left", parseInt(posX) + disX).css("top", parseInt(posY) + disY);
}
});
$(document).mouseup(function() {
drag = false;
posX = out.css("left");
posY = out.css("top");
});
},
//预载
loading: function(options) {
var element = $('<div class="wrap_remind">加载中...</div>');
options = options || {}
var newOptions = $.extend({}, options, {bar: false});
$.wjybox(element, newOptions);
},
//ask询问方法
ask: function(message, sureCall, cancelCall, options) {
var element = $('<div class="wrap_remind">'+message+'<p><button id="wjySureBtn" class="submit_btn">确认</button>  <button id="wjyCancelBtn" class="cancel_btn">取消</button></p></div>');
$.wjybox(element, options);
//回调方法
$("#wjySureBtn").click(function() {
if ($.isFunction(sureCall)) {
sureCall.call(this);
}
});
$("#wjyCancelBtn").click(function() {
if (cancelCall && $.isFunction(cancelCall)) {
cancelCall.call(this);
}
$.wjybox.hide();
});
},
//remind提醒方法
remind: function(message, callback, options) {
var element = $('<div class="wrap_remind">'+message+'<p><button id="wjySubmitBtn" class="submit_btn">确认</button</p></div>');
$.wjybox(element, options);
$("#wjySubmitBtn").click(function() {
//回调方法
if (callback && $.isFunction(callback)) {
callback.call(this);
}
$.wjybox.hide();
});

},
//uri Ajax方法
ajax: function(uri, params, options) {
if (!params || typeof(params) !== "object") {
params = {};
}
if (uri) {
$.wjybox.loading(options);
$.get(uri, params, function(data) {
var scriptReg = /<script>.*<\/script>/g;
var html = data.replace(scriptReg, ""), arrScript = data.match(scriptReg);
$.wjybox(html, options);
$.each(arrScript, function(i, n) {
$("head").append($(n));
});
});
}
}
});
var wjyboxDefault = {
title: "对话框",
shut: "×",
index: 9999,
opacity: 0.5,

width: "auto",
height: "auto",

bar: true, //是否显示标题栏
bg: true, //是否显示半透明背景
btnclose:true, //是否显示关闭按钮

fix: false, //是否弹出框固定在页面上
bgclose: false, //是否点击半透明背景隐藏弹出框
drag: false, //是否可拖拽
style: true, //是否默认加载样式

ajaxTagA: true, //是否a标签默认Ajax操作

protect: "auto", //保护装载的内容

onshow: $.noop, //弹窗显示后触发事件
onclose:$.noop, //弹窗关闭后触发事件

delay: 0 //弹窗打开后关闭的时间, 0和负值不触发
};

})(jQuery);js下载链接:点击打开链接
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: