您的位置:澳门新葡亰平台官网下载 > 运维 > jQuery 动画弹出窗体支持多种展现方式_jquery_脚本之家

jQuery 动画弹出窗体支持多种展现方式_jquery_脚本之家

2019-11-27 02:20

卡通效果 从哪个目的上接触的即从该指标开头逐进入显示器中间移动,并稳步张开,张开后个中的显示对象再从上到下稳步举办。点击关闭时,先将张开的来得的靶子日益缩回,然后再稳步移到触发的对象方面。 说的有一些绕,小编要好都不掌握是怎么着看头,说白了就是从何方来回哪里去。 表现格局 第朝气蓬勃种:string 那是最简便易行最明了的法子,不用多说,就是一贯赋值字符串并出示出来。 第三种:ajax 这种是援救ajax的显现,正是异步获取数据并体现出来。 第两种: iframe 一孔之见正是帮忙嵌套iframe显示。 第多种:controls 那么些名字有一点不太好明白,正是将页面包车型地铁某些对象表现出来。譬喻:document.getElementById; 插件代码实现 复制代码 代码如下: { $.alerts = { alert : function{ var defaults = { title : '标题', content : '内容', GetType : 'string', //controls,ajax,string,iframe IsDrag : true, Url : '', Data : null, width:400, height:300, callback : function(){} } var options = $.extend; if { $.alerts._createObject(); } var position = $.alerts._getPosition; var winPosition = $.alerts._getWindowPosition; $.hide.css( { width:position.w, height:position.h, top:position.t, left:position.l, zIndex:1001 } ); $("#windowBottom,#windowBottomContent").css( { height:options.height-30 } ); $.css( { height:options.height - 45, width:options.width - 25 } ); $.html; switch{ case "string": $.html; break; case "ajax": if{ alert; return; }else{ $.ajax( { type: "POST", url: options.Url, data: options.Data, success: function{ $.html; } break; case "controls": $.html(options.content.innerHTML); break; case "iframe": $.empty.attr( { src : options.Url, width:options.width, height:options.height } ).appendTo; break; } $.animate( { left:winPosition.l, top:winPosition.t, height:winPosition.h, width:winPosition.w },500,function(){ //$.fadeIn; $.slideDown; if($("#middleElement_bgDiv").get{ $.attr("id","middleElement_bgDiv").css( { position:"absolute", left:"0px", top:"0px", width:$+"px", height:Math.max,$+"px", filter:"Alpha", opacity:"0.4", backgroundColor:"#AAAAAA", zIndex:"1000", margin:"0px", padding:"0px" } ).appendTo; }else{ $("#middleElement_bgDiv").show; $.one{ $.slideUp{ $.animate( { left:position.l, top:position.t, height:position.h, width:position.w },500,function; if($("#middleElement_bgDiv").get{ $("#middleElement_bgDiv").hide.css( { left:winPosition.l, top:winPosition.t, height:winPosition.h, width:winPosition.w } ); } ); }) }); $.mousedown{ $.alerts.Drag( document.getElementById, { e : event, Drag : options.IsDrag } ); }); }, _createObject : function(){ $("

"+ "

"+ "

Window example

"+ "图片 1"+ "图片 2"+ "图片 3"+ "

"+ "

"+ "

"+ "图片 4"+ "

").appendTo; }, _getWindowPosition : function{ var wPosition = $.alerts._getPosition; var windowPosition = {}; windowPosition.t = parseInt+parseInt); windowPosition.l = +$/2 - options.width/2; windowPosition.w = options.width; windowPosition.h = options.height; return windowPosition; }, _getPosition : function.offset().top; var left = $.left; var height = $; var width = $; return {t:top,l:left,h:height,w:width}; }, Drag : function{ var e = options.e || window.event; var Drag = options.Drag; ifreturn; var x=parseInt; var y=parseInt; var x_=e.clientX-x; var y_=e.clientY-y; if(document.addEventListener){ document.addEventListener('mousemove', inFmove, true); document.addEventListener('mouseup', inFup, true); } else if{ document.attachEvent('onmousemove', inFmove); document.attachEvent; } inFstop; function inFmovee=window.event; obj.style.left=e.clientX-x_+'px'; obj.style.top=e.clientY-y_+'px'; inFstop; } function inFupe=window.event; if(document.removeEventListener){ document.removeEventListener('mousemove', inFmove, true); document.remove伊夫ntListener('mouseup', inFup, true); } else if{ document.detachEvent('onmousemove', inFmove); document.detach伊芙nt; } inFstop; } function inFstop{ if return e.stopPropagation(); else return e.cancelBubble=true; } function inFabort{ if return e.preventDefault(); else return e.returnValue=false; } } } JAlert = function{ $.alerts.alert; 调用代码 复制代码 代码如下: $.each.bind{ JAlert(this,{ title : '提醒窗体', content : $[0].outerHTML, GetType : 'string', //controls,ajax,string,iframe IsDrag : true, Url : "windows.html", Data : null, width:300, height:200 }); }); }); }); 使用验证: title: 窗体标题content:决议于GetType属性,如若GetType='string',那么content便是要展现的内容,借使GetType='controls',那么content则为要来得的DOM对象。此外多个项目可不要填写。 GetType:表现的多样类型:string,iframe,ajax,controls IsDrag:是或不是辅助拖拽 Url: 相符在于GetType属性,假诺GetType='ajax',那么Url就是伸手的UEvoqueL地址,假使GetType='iframe',那么U传祺L正是iframe的链接地址。别的三个门类不用填写 Data:当GetType='ajax'时,Data属性为倡议的数据。 width:展现层的肥瘦 height:展现层的惊人 HTML代码 复制代码 代码如下: Open window Open window

Open window

招待待上访谈《本子之家》的网址,希望与大家后生可畏道研商本事难题,协同实现各自的企盼!

网址:

卷入下载地址

本文由澳门新葡亰平台官网下载发布于运维,转载请注明出处:jQuery 动画弹出窗体支持多种展现方式_jquery_脚本之家

关键词: