菜单

js弹出特效

2020年2月27日 - 首页

开创遮罩层复制代码 代码如下:
_createCover: function() { var newMask = document.createElement;
newMask.id = this._mark; newMask.style.position = “absolute”;
newMask.style.zIndex = “100”; _scrollWidth =
Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight =
Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
newMask.style.width = _scrollWidth + “px”; newMask.style.height =
_scrollHeight + “px”; newMask.style.top = “0px”; newMask.style.left =
“0px”; newMask.style.background = “#000”; newMask.style.filter =
“alpha”; newMask.style.opacity = “0.50”; newMask.style.display = ‘none’;
document.body.appendChild; this._cover = newMask; }

应用原生JS达成弹出层特效,js弹出特效

开创遮罩层

复制代码 代码如下:

  _createCover: function() {
      var newMask = document.createElement(“div”);
      newMask.id = this._mark;
      newMask.style.position = “absolute”;
      newMask.style.zIndex = “100”;
      _scrollWidth =
Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
      _scrollHeight =
Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
      newMask.style.width = _scrollWidth + “px”;
      newMask.style.height = _scrollHeight + “px”;
      newMask.style.top = “0px”;
      newMask.style.left = “0px”;
      newMask.style.background = “#000”;
      newMask.style.filter = “alpha(opacity=50)”;
      newMask.style.opacity = “0.50”;
      newMask.style.display = ‘none’;
      document.body.appendChild(newMask);
      this._cover = newMask;
  }

新建弹出层

复制代码 代码如下:

  _createFloater: function(html) {
      var newDiv = document.createElement(“div”);
      newDiv.id = this._id;
      newDiv.style.position = “absolute”;
      newDiv.style.zIndex = “9999”;
      newDivWidth = 400;
      newDivHeight = 200;
      newDiv.style.width = newDivWidth + “px”;
      newDiv.style.height = newDivHeight + “px”;
      newDiv.style.top = (document.body.scrollTop +
document.body.clientHeight/2 – newDivHeight/2) + “px”;
      newDiv.style.left = (document.body.scrollLeft +
document.body.clientWidth/2 – newDivWidth/2) + “px”;
      newDiv.style.padding = “5px”;
      newDiv.style.display = ‘none’;
      newDiv.innerHTML = html;
      document.body.appendChild(newDiv);
      this._floater = newDiv;
  }

调护医治弹层地点

复制代码 代码如下:

     addjustPosition: function() {
         this._floater.style.top = (document.body.scrollTop +
document.body.clientHeight/2 – newDivHeight/2) + “px”;
         this._floater.style.left = (document.body.scrollLeft +
document.body.clientWidth/2 – newDivWidth/2) + “px”;
     }

显示器滚动事件时调节职分

复制代码 代码如下:

this._fS = BindAsEventListener(this, this.addjustPosition);
addEventHandler(window, “scroll”, this._fS);
// 隐蔽后需
removeEventHandler(window, “scroll”, this._fS);

一体化代码

复制代码 代码如下:

 var Floater = (function(){
 var me = Class.create();
 me.prototype = {
     initialize: function(options) {
         this._fS = BindAsEventListener(this, this.addjustPosition);
         this.setOptions(options);
     },
     setOptions: function(options) {
         this.options = options || {};
         this._id = options.id;
         this._mark = ‘mark’;
     },
     show: function(html,options) {
         options = options || {};
         if(!this._cover){
             this._createCover();
         }
         if(!this._floater){
             this._createFloater(html);
         }
         if(options.saveOpt){
             this._saveOption = options.saveOpt;
             this.bindSaveEvent();
         }
         this._bindScrollEvent();
         this.addjustPosition();
         this._floater.style.display = ”;
         this._cover.style.display = ”;
         this.isShow = true;
     },
     insert: function(html,opts,att){
         var _e = document.createElement(“div”), _t;
         _e.innerHTML = html;
         for(var k in opts){
             _e[k] = opts[k];
         }
         _t = this._floater.querySelector(‘[‘+att+’]’);
         if(_t){
             _t.appendChild(_e);
         }
     },
     getFloater: function(){
         if(this._floater){
             return this._floater;
         }
     },
     //遮罩层
     _createCover: function() {
         var newMask = document.createElement(“div”);
         newMask.id = this._mark;
         newMask.style.position = “absolute”;
         newMask.style.zIndex = “100”;
         _scrollWidth =
Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
         _scrollHeight =
Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
         newMask.style.width = _scrollWidth + “px”;
         newMask.style.height = _scrollHeight + “px”;
         newMask.style.top = “0px”;
         newMask.style.left = “0px”;
         newMask.style.background = “#000”;
         newMask.style.filter = “alpha(opacity=50)”;
         newMask.style.opacity = “0.50”;
         newMask.style.display = ‘none’;
         document.body.appendChild(newMask);
         this._cover = newMask;
     },
     //新弹出层
     _createFloater: function(html) {
         var newDiv = document.createElement(“div”);
         newDiv.id = this._id;
         newDiv.style.position = “absolute”;
         newDiv.style.zIndex = “9999”;
         newDivWidth = 400;
         newDivHeight = 200;
         newDiv.style.width = newDivWidth + “px”;
         newDiv.style.height = newDivHeight + “px”;
         newDiv.style.top = (document.body.scrollTop +
document.body.clientHeight/2 – newDivHeight/2) + “px”;
         newDiv.style.left = (document.body.scrollLeft +
document.body.clientWidth/2 – newDivWidth/2) + “px”;
         newDiv.style.padding = “5px”;
         newDiv.style.display = ‘none’;
         newDiv.innerHTML = html;
         document.body.appendChild(newDiv);
         this._floater = newDiv;
     },
     //弹出层滚动居中
     addjustPosition: function() {
         this._floater.style.top = (document.body.scrollTop +
document.body.clientHeight/2 – newDivHeight/2) + “px”;
         this._floater.style.left = (document.body.scrollLeft +
document.body.clientWidth/2 – newDivWidth/2) + “px”;
     },
     bindSaveEvent: function() {
         this._saveElem =
this._floater.querySelector(‘[‘+this._saveOption.elem+’]’);
         if(this._saveElem){
             addEventHandler(this._saveElem, “click”,
this._saveOption.handler);
         }
     },
     _bindScrollEvent: function() {
         addEventHandler(window, “scroll”, this._fS);
     },
     hide: function() {
         this.isShow = false;
         this.destory();
     },
     destory: function() {
         removeEventHandler(window, “scroll”, this._fS);
         if(this._saveElem){
             removeEventHandler(this._saveElem, “click”,
this._saveOption.handler);
         }
         if (this._cover){
             document.body.removeChild(this._cover);
         }
         if (this._floater){
             document.body.removeChild(this._floater);
         }
         this._cover = null;
         this._floater = null;
     }
 };
 return me;
 })();

成立遮罩层
复制代码 代码如下: _createCover: function() { var newMask =
document.createElement(“div”); newMask.id =…

复制代码 代码如下: _createFloater:
function { var newDiv = document.createElement; newDiv.id = this._id;
newDiv.style.position = “absolute”; newDiv.style.zIndex = “9999”;
newDivWidth = 400; newDivHeight = 200; newDiv.style.width = newDivWidth

复制代码 代码如下: addjustPosition:
function(State of Qatar { this._floater.style.top = (document.body.scrollTop +
document.body.clientHeight/2 – newDivHeight/2) + “px”;
this._floater.style.left = (document.body.scrollLeft +
document.body.clientWidth/2 – newDivWidth/2) + “px”; }

显示器滚动事件时调度地点

复制代码 代码如下:this._fS =
BindAsEventListener(this, this.addjustPosition);addEventHandler(window,
“scroll”, this._fS卡塔尔(قطر‎;// 隐瞒后需removeEventHandler(window, “scroll”,
this._fS);

复制代码 代码如下:var Floater = {var me =
Class.create(卡塔尔国;me.prototype = { initialize: function { this._fS =
BindAsEventListener(this, this.addjustPosition); this.setOptions; },
setOptions: function { this.options = options || {}; this._id =
options.id; this._mark = ‘mark’; }, show: function { options = options
|| {}; if{ this._createCover(); } if{ this._createFloater; } if{
this._saveOption = options.saveOpt; this.bindSaveEvent(); }
this._bindScrollEvent(); this.addjustPosition();
this._floater.style.display = ”; this._cover.style.display = ”;
this.isShow = true; }, insert: function{ var _e =
document.createElement, _t; _e.innerHTML = html; for{ _e[k] =
opts[k]; } _t = this._floater.querySelector{ _t.appendChild; } },
getFloater: function{ return this._floater; } }, //遮罩层
_createCover: function() { var newMask = document.createElement;
newMask.id = this._mark; newMask.style.position = “absolute”;
newMask.style.zIndex = “100”; _scrollWidth =
Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight =
Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
newMask.style.width = _scrollWidth + “px”; newMask.style.height =
_scrollHeight + “px”; newMask.style.top = “0px”; newMask.style.left =
“0px”; newMask.style.background = “#000”; newMask.style.filter =
“alpha”; newMask.style.opacity = “0.50”; newMask.style.display = ‘none’;
document.body.appendChild; this._cover = newMask; }, //新弹出层
_createFloater: function { var newDiv = document.createElement;
newDiv.id = this._id; newDiv.style.position = “absolute”;
newDiv.style.zIndex = “9999”; newDivWidth = 400; newDivHeight = 200;
newDiv.style.width = newDivWidth + “px”; newDiv.style.height =
newDivHeight + “px”; newDiv.style.top = (document.body.scrollTop +
document.body.clientHeight/2 – newDivHeight/2) + “px”; newDiv.style.left
= (document.body.scrollLeft + document.body.clientWidth/2 –
newDivWidth/2) + “px”; newDiv.style.padding = “5px”;
newDiv.style.display = ‘none’; newDiv.innerHTML = html;
document.body.appendChild; this._floater = newDiv; }, //弹出层滚动居中
addjustPosition: function(卡塔尔 { this._floater.style.top =
(document.body.scrollTop + document.body.clientHeight/2 –
newDivHeight/2) + “px”; this._floater.style.left =
(document.body.scrollLeft + document.body.clientWidth/2 – newDivWidth/2)

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图