点击出现弹性、可拖拽的遮罩层，动态关闭层效果

发布时间：2018-08-16 07:14:46 所属栏目：活动来源：站长网

导读：点击按钮显示带弹性、可拖拽的遮罩层，点击右上角的关闭按钮，动态向上消失效果，这是基于 jQuery 写的一个弹出层的类，作者将一些参数提另写出来，例如：拖拽、关闭按钮、层的透明度、回弹的速度和回弹的次数等，非常不错的特效。为解决一些网页特效运行

　　点击按钮显示带弹性、可拖拽的遮罩层，点击右上角的关闭按钮，动态向上消失效果，这是基于jQuery写的一个弹出层的类，作者将一些参数提另写出来，例如：拖拽、关闭按钮、层的透明度、回弹的速度和回弹的次数等，非常不错的特效。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>jQuery弹性升降的遮罩层，可拖拽、动态关闭效果</title> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> var mastArr = function(){ return { "wrap" : "#maskWrap",//遮罩层总背景 "move" : ".move",//拖拽 "closeBox" : ".close",//关闭遮罩层 "touch" : ".button",//触发遮罩层按钮 "box" : ".box",//遮罩层 "pm" : 5, //拖动层由于父层 padding 、margin 、 position引起的间差,目前设置为手动调节 "t" : 300, //移动速度 "o" : 0.20, //遮罩透明度 "k" : 0.70, //回弹速度 "n" : 10 //回弹次数 }; }(); function Mask(arr) { this.closeBox = arr.closeBox; this.wrap = arr.wrap; this.move = arr.move; this.touch = arr.touch; this.box = arr.box; this.pm = arr.pm; this.t = arr.t; this.k = arr.k; this.n = arr.n; this.o = arr.o; } Mask.prototype = { constructor : Mask, maskShow : function() { if(arguments.length == 0){ $mask.maskShow(mastArr); return; } else { var arr = arguments[0]; if(arr.wrap !== undefined){ this.wrap = arr.wrap; }; if(arr.move !== undefined){ this.move = arr.move; }; if(arr.touch !== undefined){ this.touch = arr.touch; }; if(arr.closeBox !== undefined){ this.closeBox = arr.closeBox; }; if(arr.box !== undefined){ this.box = arr.box; }; if(arr.pm !== undefined){ this.pm = arr.pm; }; if(arr.t !== undefined){ this.t = arr.t; }; if(arr.k !== undefined){ this.k = arr.k; }; if(arr.n !== undefined){ this.n = arr.n; }; if(arr.o !== undefined){ this.o = arr.o; }; }; var _closeBox = $(this.closeBox), _wrap = $(this.wrap), _move = $(this.move), _touch = $(this.touch), _box = $(this.box), pm = this.pm, t = this.t, k = this.k, o = this.o, n = this.n; var H = $(window).height(), W = $(window).width(), w = _box.width(), h = _box.height(), v = $("body").height(), bH = v - H >= 0 ? v : H; window.onresize = function(){ H = $(window).height(), W = $(window).width(), v = $("body").height(), bH = v - H >= 0 ? v : H; }; var flag = false, time = null, zd = {x:0, y:0}, md = {x:0, y:0}; _move.mousedown(function(e){ var p = _move.offset(); md.x = e.pageX - p.left; md.y = e.pageY - p.top; flag = true; }); $(document).mousemove(function(e){ if(flag){ time = setTimeout(function(){ z(e.pageX, e.pageY); }, 30); return false; }; }).mouseup(function(){ flag = false; }); function z(X, Y){ zd.x = X - md.x - pm; zd.y = Y - md.y - pm; if(X - md.x <= 0){ zd.x = 0}; if(Y - md.y <= 0){ zd.y = 0}; if(zd.x >= W - w){ zd.x = W - w}; if(zd.y >= bH - h){ zd.y = bH - h}; if(X <= 0 || Y <= 0 || X >= W || Y >= bH){ flag = false; }; _box.css({"left": zd.x + 'px', "top": zd.y + 'px'}); }; _touch.click(function(){ var cH = H/2 - h/2 + $(window).scrollTop(), num = 1, j = 3; _wrap.show().css("height", bH + 'px').stop(true, false).animate({"opacity": o}, t, function(){ _box.show().css({"left": W/2 - w/2 + 'px', "top": -h + 'px'}).stop(true, false).animate({"top": cH + 'px'}, t*k); function start(n){ num *= k; j *= 2; if(n<=1){ return false; } _box.animate({"top": cH - h/j + 'px'}, t*k*num).animate({"top": cH + 'px'}, t*k*num); arguments.callee(n-1); }; start(n); }); _wrap.clearQueue(); return false; }); _closeBox.click(function(){ _box.stop(true, false).animate({"top": -h + 'px'},{duration: t*6, queue: false}) .delay(t/2, "del") .queue("del", function(next){ $(this).stop(true, false).animate({"top": -h + 'px'}, t, function(){ _wrap.animate({"opacity": 0}, t, function(){ $(this).hide(); }); _box.hide(); }); next(); }).dequeue("del"); _box.clearQueue(); return false; }); } }; var $mask = new Mask(mastArr); $(function(){ $mask.maskShow({ "o" : 0.50, "n" : 7 }); }); </script> <style type="text/css">  </style> </head> <body> <div class="box"> <div class="content_wrap"></div> <div class="content"> <div class="move"> <a href="#" class="close">关闭</a> </div> <span></span> </div> </div> <button class="点击查看效果">button</button> <div id="maskWrap"></div> <div style="height:1800px"></div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!