代碼如下：
. 代碼如下:
(function ($) {
var imgdir = 'images/';//圖片文件夾路徑
var autoHide=false;//懸浮div是否自動隱藏
var hideType='hide';//隱藏的方式 可選參數 hide、slide、fade
var hideDelay=0;//懸浮div隱藏過程使用的時間
var hideTime=0;//懸浮div延遲隱藏時間
var zIndex=100;//多個div時獲取焦點的div處於頂層
var showType='show';//懸浮div顯示方式 可選參數 hide、slide、fade
var showTime=0;//懸浮div顯示過程使用的時間
var showDelay=0;//懸浮div延遲顯示的時間
//以下兩個變量用於保證div被拖動後隱藏 再次打開後出現的位置仍然為首次出現的位置
var oldTop='';//保存div初次出現的top
var oldLeft='';//保存div初次出現的left
$.fn.extend({
Jwin:function(option){
var op=$.extend({
id:'',//懸浮div的id （必須）
title: '',//標題
message:'',//顯示信息
elementId:'',//顯示元素的id
url: '',//顯示的頁面地址
width: 400,//懸浮div的寬度
height: 300,//懸浮div的高度
//懸浮div顯示參數
showType:'show',//懸浮div顯示方式 可選參數 hide、slide、fade
showTime:0,//懸浮div顯示過程使用的時間
showDelay:0,//懸浮div延遲顯示的時間
//懸浮div隱藏參數
autoHide:false,//懸浮div是否自動隱藏
hideType:'hide',//隱藏的方式 可選參數 hide、slide、fade
hideTime:0,//懸浮div隱藏過程使用的時間
hideDelay:0,//懸浮div自動隱藏延遲時間
},option);
if(op.id==''){
alert("缺少WinId");
return;
}
autoHide=op.autoHide;
hideType=op.hideType;
hideDelay=op.hideDelay;
hideTime=op.hideTime;
showType=op.showType;
showTime=op.showTime;
showDelay=op.showDelay;
zIndex=zIndex+1;
var winEle=$("#"+op.id);
if(winEle.length==0){
this.width = parseInt(op.width);
this.height = parseInt(op.height);
var banner=this.JwinCreatBanner(op.id,this.width,op.title);
oldTop = this.height >= document.documentElement.clientHeight ? 0 : (document.documentElement.clientHeight-this.height)/2;
oldLeft = this.width >= document.body.clientWidth ? 0 : (document.body.clientWidth-this.width)/2;
win=$('<div id="' + op.id + '"></div>');
win.css({'position':'absolute','top':oldTop,'left':oldLeft,'width':(this.width+2),'zIndex':zIndex,'display':'none'});
win.html(banner);
win.find("#close").bind('click',function(){$(this).JwinClose(op.id);});
win.find("#bannerMiddle").bind('mousedown',function(){$(this).JwinMove(op.id);});
var container=$('<div id="' + op.id + '_con"></div>');
container.css({'float':'left','width':+this.width,'height':this.height,'word-break':'break-all','overflow-x':'hidden','overflow-y':'auto','border':'1px solid #1972e1','background-color':'#FFF','clear':'both'});
if(op.message.length>0){
container.append(op.message);
}
else if(op.url.length>0){
var iframe=$('<iframe frameborder="0"></iframe>');
iframe.css({'width':'100%','height':'100%','overflow':'visible','border':'0'});
iframe.attr('src',op.url);
container.append(iframe);
}
else if(op.elementId.length>0){
var element=$("#"+op.elementId);
if(element){
container.append(element);
element.show();
}
}
win.append(container);
$(document.body).append(win);
this.JwinShow(win);
//是否設置自動關閉
if(autoHide){
this.JwinHide(op.id);
}
}
else{
winEle.css({'zIndex':(winEle.css('zIndex')+2),'top':oldTop,'left':oldLeft});
this.JwinShow(winEle);
}
},
//創建標題
JwinCreatBanner:function(winId,width,title){
var bannerImddleWidth = width-47;//拖動部分div寬度為總寬度減去兩邊圓角寬度、關閉按鈕寬度
var banner = '<div style="folat:left;width:'+(width+2)+';clear:both;font-size:14px;font:Arial,Helvetica,sans-serif;color:#FFF;">';
banner += '<div style="width:14px;height:30px;line-height:30px;float:left;background:url('+imgdir+'windows_banner_left.gif) no-repeat;"></div>';
banner += '<div id="bannerMiddle" style="width:'+bannerImddleWidth+'px;height:30px;float:left;line-height:30px;cursor:move;float:left;text-align:left;background:url('+imgdir+'windows_banner.gif) repeat-x;" >'+title+'</div>';
banner += '<div style="width:21px;height:30px;line-height:30px;float:left;background:url('+imgdir+'windows_banner.gif) repeat-x;"><img style="border:0;margin-top:4px;" id="close" src="'+imgdir+'win_close_normal.gif" onmouseover="this.src=\''+imgdir+'win_close_hover.gif\'" onmouseout="this.src=\''+imgdir+'win_close_normal.gif\'" /></div>';
banner += '<div style="width:14px;height:30px;line-height:30px;float:left;background:url('+imgdir+'windows_banner_right.gif) no-repeat;"></div>';
banner += '</div>';
return banner;
},
//拖動
JwinMove:function(winId){
var floatWin=document.getElementById(winId);
zIndex=zIndex+1;
floatWin.style.zIndex=zIndex;
o=window.event.srcElement||window.event.target;
var d=document;
var a=window.event;
var x=a.layerX?a.layerX:a.offsetX;
var y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture){
o.setCapture();
}
else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
var maxx=document.documentElement.clientWidth-floatWin.clientWidth;
var maxy=document.documentElement.clientHeight-floatWin.clientHeight;
tx=(tx<0)?0:tx;
ty=(ty<0)?0:ty;
tx=(tx>maxx)?maxx:tx;
ty=(ty>maxy)?maxy:ty;
floatWin.style.left=tx;
floatWin.style.top=ty;
};
d.onmouseup=function(){
if(o.releaseCapture){
o.releaseCapture();
}
else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
d.onmousemove=null;
d.onmouseup=null;
};
},
//顯示
JwinShow:function(win){
var t = showDelay;
switch(showType){
case 'slide':
setTimeout(function(){win.slideDown(showTime);}, t);
break;
case 'fade':
setTimeout(function(){win.fadeIn(showTime);},t);
break;
default:
setTimeout(function(){win.show();},t);
break;
}
},
//隱藏
JwinHide:function(winId,atonce){
var win = $("#"+winId);
var t = atonce ? 0 : hideDelay;
switch(hideType){
case 'slide':
setTimeout(function(){win.slideUp(hideTime);}, t);
break;
case 'fade':
setTimeout(function(){win.fadeOut(hideTime);},t);
break;
default:
setTimeout(function(){win.hide();},t);
break;
}
},
//關閉
JwinClose:function(winId){
this.JwinHide(winId,true);
}
});
})(jQuery)