cari

Rumah  >  Artikel  >  hujung hadapan web  >  Simulasi JS Dialog pop timbul kotak terapung kesan code_javascript kemahiran

Simulasi JS Dialog pop timbul kotak terapung kesan code_javascript kemahiran

WBOY
WBOYasal
2016-05-16 15:36:351274semak imbas

Contoh dalam artikel ini menerangkan kod kesan kotak terapung simulasi JS Dialog. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Berikut ialah demonstrasi JS simulasi kotak terapung pop timbul Dialog, gaya klasik biru, anda boleh mencipta lapisan baharu, tetapkan tajuk dan kandungan lapisan pop timbul, gunakannya untuk melaksanakan kotak log masuk atau gunakan ia dalam pengurusan latar belakang.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-mn-dialog-float-dlg-style-demo/

Kod khusus adalah seperti berikut: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Dialog浮动窗口</title>
<style type="text/css">
.dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;}
.dialogtitle{height:26px; width:auto; background-image:url(images/103444839_p.gif);}
.dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; }
.dialogtitleico{float:right; height:20px; width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url(images/103419495_p.gif);background-position:-21px 0px}
.dialogbody{ padding:10px; width:auto; background-color: #FFFFFF;}
.dialogbottom{
 bottom:1px; right:1px;cursor:nw-resize;
 position:absolute;
 background-image:url(images/103419495_p.gif);
 background-position:-42px -10px;
 width:10px;
 height:10px;
 font-size:0;}
</style>
</head>
<body >
<input value="创建" type="button" onclick="creat()" />
<div id='aa'></div>
<script>
var z=1,i=1,left=10
var isIE = (document.all) &#63; true : false;
var $ = function (id) {
 return document.getElementById(id);
};
var Extend = function(destination, source) {
 for (var property in source) {
 destination[property] = source[property];
 }
}
var Bind = function(object, fun,args) {
 return function() {
 return fun.apply(object,args||[]);
 }
}
var BindAsEventListener = function(object, fun) {
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function(event) {
 return fun.apply(object, [event || window.event].concat(args));
 }
}
var CurrentStyle = function(element){
 return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
 function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};
 function addListener(element,e,fn){ element.addEventListener&#63;element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
 function removeListener(element,e,fn){ element.removeEventListener&#63;element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
 var Class = function(properties){
 var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') &#63; this.initialize.apply(this, arguments) : this;};
 _class.prototype = properties;
 return _class;
 };
var Dialog = new Class({
 options:{
 Width : 400,
 Height : 400,
 Left : 100,
 Top  : 100,
 Titleheight : 26,
 Minwidth : 200,
 Minheight : 200,
 CancelIco : true,
 ResizeIco : false,
 Info : "新闻标题",
 Content : "无内容",
 Zindex : 2 
 },
 initialize:function(options){
 this._dragobj = null;
 this._resize = null;
 this._cancel = null;
 this._body = null;
 this._x  = 0;
 this._y  = 0;
 this._fM = BindAsEventListener(this, this.Move);
 this._fS = Bind(this, this.Stop);
 this._isdrag = null;
 this._Css = null;
 this.Width = this.options.Width;
 this.Height = this.options.Height;
 this.Left = this.options.Left;
 this.Top = this.options.Top;
 this.CancelIco = this.options.CancelIco;
 this.Info = this.options.Info;
 this.Content = this.options.Content;
 this.Minwidth = this.options.Minwidth;
 this.Minheight = this.options.Minheight;
 this.Titleheight= this.options.Titleheight;
 this.Zindex = this.options.Zindex;
 Extend(this,options);
 Dialog.Zindex = this.Zindex
//构造dialog
 var obj = ['dialogcontainter','dialogtitle','dialogtitleinfo','dialogtitleico','dialogbody','dialogbottom'];
 for(var i = 0;i<obj.length;i++)
 { obj[i]=create('div',null,function(elm){elm.className = obj[i];}); }
 obj[2].innerHTML = this.Info;
 obj[4].innerHTML = this.Content;
 obj[1].appendChild(obj[2]);
 obj[1].appendChild(obj[3]);
 obj[0].appendChild(obj[1]);
 obj[0].appendChild(obj[4]);
 obj[0].appendChild(obj[5]);
 document.body.appendChild(obj[0]);
 this._dragobj = obj[0];
 this._resize = obj[5];
 this._cancel = obj[3];
 this._body = obj[4];
///o,x1,x2
////设置Dialog的长 宽 ,left ,top
 with(this._dragobj.style){
  height = this.Height + "px";top = this.Top + "px";width = this.Width +"px";left = this.Left + "px";zIndex = this.Zindex;
 }
 this._body.style.height = this.Height - this.Titleheight-parseInt(CurrentStyle(this._body).paddingLeft)*2+'px';
/////////////////////////////////////////////////////////////////////////////// 添加事件 
 addListener(this._dragobj,'mousedown',BindAsEventListener(this, this.Start,true));
 addListener(this._cancel,'mouseover',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px']));
 addListener(this._cancel,'mouseout',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px']));
 addListener(this._cancel,'mousedown',BindAsEventListener(this,this.Disappear));
 addListener(this._body,'mousedown',BindAsEventListener(this, this.Cancelbubble));
 addListener(this._resize,'mousedown',BindAsEventListener(this, this.Start,false));
 },
 Disappear:function(e){
  this.Cancelbubble(e);
  document.body.removeChild(this._dragobj);
 },
 Cancelbubble:function(e){
  this._dragobj.style.zIndex = ++Dialog.Zindex;
  document.all&#63;(e.cancelBubble=true):(e.stopPropagation())
 },
 Changebg:function(o,x1,x2){
  o.style.backgroundPosition =(o.style.backgroundPosition==x1)&#63;x2:x1;
 },
 Start:function(e,isdrag){
  if(!isdrag){this.Cancelbubble(e);} 
  this._Css = isdrag&#63;{x:"left",y:"top"}:{x:"width",y:"height"}
  this._dragobj.style.zIndex = ++Dialog.Zindex;
  this._isdrag = isdrag;
  this._x = isdrag&#63;(e.clientX - this._dragobj.offsetLeft||0):(this._dragobj.offsetLeft||0) ;
  this._y = isdrag&#63;(e.clientY - this._dragobj.offsetTop ||0):(this._dragobj.offsetTop||0);
  if(isIE)
  {
   addListener(this._dragobj, "losecapture", this._fS);
   this._dragobj.setCapture();
  }
  else
  {
   e.preventDefault();
   addListener(window, "blur", this._fS);
  }
  addListener(document,'mousemove',this._fM)
  addListener(document,'mouseup',this._fS)
 },
 Move:function(e){
  window.getSelection &#63; window.getSelection().removeAllRanges() : document.selection.empty();
  var i_x = e.clientX - this._x, i_y = e.clientY - this._y;
  this._dragobj.style[this._Css.x] = (this._isdrag&#63;Math.max(i_x,0):Math.max(i_x,this.Minwidth))+'px';
  this._dragobj.style[this._Css.y] = (this._isdrag&#63;Math.max(i_y,0):Math.max(i_y,this.Minheight))+'px'
  if(!this._isdrag)
  this._body.style.height = Math.max(i_y -this.Titleheight,this.Minheight-this.Titleheight)-2*parseInt(CurrentStyle(this._body).paddingLeft)+'px';
 },
 Stop:function(){
  removeListener(document,'mousemove',this._fM);
  removeListener(document,'mouseup',this._fS);
  if(isIE)
  {
   removeListener(this._dragobj, "losecapture", this._fS);
   this._dragobj.releaseCapture();
   }
   else
   { 
   removeListener(window, "blur", this._fS);
   };
  }
})
 new Dialog({Width:300,Height:300,Left:300,Top:300});
 new Dialog({Info:"人族",Content:"人族很强吗&#63;"});
 function creat(){
  new Dialog({Info:title="标题"+i,Left:300+left,Top:300+left,Content:'内容'+i,Zindex:(++Dialog.Zindex)});
 i++;left +=10;
 }
</script>
</body>
</html>

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery melaksanakan kod gambarajah perhubungan pelbagai peringkat aksara dengan fade effect_jqueryArtikel seterusnya：jQuery melaksanakan kod gambarajah perhubungan pelbagai peringkat aksara dengan fade effect_jquery

Artikel berkaitan

Lihat lagi