├── README.md
├── demo.html
└── luck
├── luck.js
└── skin
└── default
├── icon.png
└── luck.css
/README.md:
--------------------------------------------------------------------------------
1 | # luck弹层组件
2 | Luck 是一只活泼可爱的小狗，被主人施加了魔法现成为前端界知名弹层组件，如今的luck今非昔比，不信召唤一下试试！
3 | #关于luck
4 | 我有一只小狗，名字叫luck，感觉这个luck好记又好听所以命名为
5 | luck弹层组件，组件使用了css3的动画，就像luck一样活泼可爱，如果您觉得好用的话就点击右侧的分享按钮分享到您的朋友圈吧!让更多的人知道luck
6 | 官网演示
7 |
8 |
--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | luck弹层组件-PC版
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
91 |
92 |
93 |
94 |
--------------------------------------------------------------------------------
/luck/luck.js:
--------------------------------------------------------------------------------
1 | /*
2 | @ Name：luck弹层组件-PC版
3 | @ Author：前端老徐
4 | @ Date：2015/5/20
5 | @ E-mail：442413729@qq.com
6 | @ Weibo:http://weibo.com/qdlaoxu
7 | @ GitHub:https://github.com/waihaolaoxu
8 | @ Address:http://www.loveqiao.com/
9 | */
10 | !function(a) {
11 | "use strict";
12 | var skin = {
13 | url:"skin/",
14 | name:"default/"
15 | }, c = document, count = 0, delay = null;
16 | //定义主类
17 | function Class(opt) {
18 | this.config = opt;
19 | }
20 | Class.pt = Class.prototype;
21 | Class.pt.windowSize = true;
22 | Class.pt.createElement = function(tag, cla, id) {
23 | var obj = c.createElement(tag);
24 | id ? obj.id = id :"";
25 | cla ? obj.className = cla :"";
26 | return obj;
27 | };
28 | Class.pt.view = function() {
29 | var opt = this.config, luck_layer, luck_shade, luck_box, luck_title, luck_close, luck_con, luck_btn, luck_resize;
30 | //主框架
31 | luck_layer = this.createElement("div", "luck-layer");
32 | luck_shade = this.createElement("div", "luck-shade");
33 | if (opt.shadeClose) {
34 | luck_shade.onclick = function() {
35 | luck.close(luck_layer);
36 | };
37 | }
38 | luck_box = this.createElement("div", "luck-box", "luck-box-" + count);
39 | if (opt.width) {
40 | luck_box.style.width = opt.width;
41 | }
42 | if (opt.height) {
43 | luck_box.style.height = opt.height;
44 | }
45 | if (opt.addclass) {
46 | $(luck_box).addClass(opt.addclass);
47 | }
48 | //标题
49 | if (opt.title) {
50 | luck_title = this.createElement("div", "luck-title luck-move");
51 | luck_title.innerHTML = "" + opt.title + "";
52 | if (opt.move == false) {
53 | luck_title.setAttribute("move", "false");
54 | $(luck_title).addClass("noMove");
55 | }
56 | luck_box.appendChild(luck_title);
57 | }
58 | //关闭按钮
59 | if (opt.cloBtn != false) {
60 | luck_close = this.createElement("div", "luck-close luck-ico");
61 | luck_close.onclick = function() {
62 | a.luck.close(luck_layer);
63 | };
64 | luck_box.appendChild(luck_close);
65 | }
66 | //最大化切换
67 | if (opt.resize) {
68 | var _this = this;
69 | luck_resize = this.createElement("div", "luck-resize luck-ico");
70 | luck_resize.onclick = function() {
71 | _this.resize.call(_this, luck_layer);
72 | };
73 | luck_box.appendChild(luck_resize);
74 | }
75 | //内容
76 | luck_con = this.createElement("div", "luck-con");
77 | luck_box.appendChild(luck_con);
78 | if (opt.content) {
79 | luck_con.innerHTML = opt.content;
80 | } else {
81 | luck_con.innerHTML = '';
82 | }
83 | //按钮
84 | luck_btn = this.createElement("div", "luck-btn");
85 | if (typeof opt.yes == "function") {
86 | var luck_yes = this.createElement("button", "luck-yes");
87 | if (opt.btn && opt.btn[0]) {
88 | luck_yes.innerHTML = opt.btn[0];
89 | } else {
90 | luck_yes.innerHTML = "确定";
91 | }
92 | luck_yes.onclick = function() {
93 | opt.yes(luck_layer);
94 | luck.close(luck_layer);
95 | };
96 | luck_btn.appendChild(luck_yes);
97 | }
98 | if (typeof opt.no == "function") {
99 | var luck_no = this.createElement("button", "luck-no");
100 | if (opt.btn && opt.btn[1]) {
101 | luck_no.innerHTML = opt.btn[1];
102 | } else {
103 | luck_no.innerHTML = "取消";
104 | }
105 | luck_no.onclick = function() {
106 | opt.no(luck_layer);
107 | a.luck.close(luck_layer);
108 | };
109 | luck_btn.appendChild(luck_no);
110 | }
111 | if (typeof opt.yes == "function" || typeof opt.no == "function") {
112 | luck_box.appendChild(luck_btn);
113 | }
114 | //组合
115 | luck_layer.appendChild(luck_shade);
116 | luck_layer.appendChild(luck_box);
117 | return luck_layer;
118 | };
119 | Class.pt.R = function(id) {
120 | return document.getElementById(id);
121 | };
122 | //定位坐标
123 | Class.pt.offset = function(n) {
124 | var w1 = $(window).width(), h1 = $(window).height(), obj = this.R("luck-box-" + n), w2 = obj.offsetWidth, h2 = obj.offsetHeight;
125 | obj.style.left = w1 / 2 - w2 / 2 + "px";
126 | obj.style.top = h1 / 2 - h2 / 2 + "px";
127 | $(obj).addClass("show");
128 | };
129 | //拖拽层
130 | Class.pt.move = function(n) {
131 | var layer = $("#luck-box-" + n);
132 | var moveobj = layer.find(".luck-move");
133 | if (moveobj.attr("move") != "false") {
134 | var _move = false;
135 | //移动标记
136 | var _x, _y;
137 | //鼠标离控件左上角的相对位置
138 | moveobj.mousedown(function(e) {
139 | _move = true;
140 | _x = e.pageX - parseInt(layer.css("left"));
141 | _y = e.pageY - parseInt(layer.css("top"));
142 | layer.addClass("move");
143 | });
144 | $(document).mousemove(function(e) {
145 | if (_move) {
146 | var x = e.pageX - _x, //移动时根据鼠标位置计算控件左上角的绝对位置
147 | y = e.pageY - _y, setRig = $(window).width() - layer.outerWidth(), setTop = $(window).height() - layer.outerHeight();
148 | //控制层不被拖到窗体外
149 | x < 0 && (x = 0);
150 | y < 0 && (y = 0);
151 | x > setRig && (x = setRig);
152 | y > setTop && (y = setTop);
153 | //console.log(layer.outerHeight())
154 | layer.css({
155 | top:y,
156 | left:x
157 | });
158 | }
159 | }).mouseup(function() {
160 | _move = false;
161 | layer.removeClass("move");
162 | });
163 | }
164 | };
165 | Class.pt.resize = function(o) {
166 | var obj = $(o), flag = typeof this.config.resize == "function";
167 | if (this.windowSize) {
168 | $("html,body").addClass("hideScroll");
169 | obj.addClass("luck-full");
170 | this.windowSize = false;
171 | if (flag) {
172 | this.config.resize(obj, "big");
173 | }
174 | } else {
175 | $("html,body").removeClass("hideScroll");
176 | obj.removeClass("luck-full");
177 | this.windowSize = true;
178 | if (flag) {
179 | this.config.resize(obj, "small");
180 | }
181 | }
182 | };
183 | a.luck = {
184 | open:function(opt) {
185 | var luckCla = new Class(opt);
186 | var o = luckCla.view();
187 | c.body.appendChild(o);
188 | luckCla.offset(count);
189 | //居中定位
190 | luckCla.move(count);
191 | //绑定拖动事件
192 | if (opt.time) {
193 | //定时关闭
194 | setTimeout(function() {
195 | a.luck.close(o);
196 | }, opt.time);
197 | }
198 | count++;
199 | return o;
200 | },
201 | alert:function(opt) {
202 | a.luck.open({
203 | width:opt.width?opt.width:'',
204 | content:'' + opt.con + "
",
205 | cloBtn:false,
206 | yes:function(obj) {
207 | if(opt.callback){
208 | opt.callback();
209 | }
210 | }
211 | });
212 | },
213 | confirm:function(opt) {
214 | a.luck.open({
215 | cloBtn:false,
216 | content:'' + opt.con + "",
217 | btn:opt.btn?opt.btn:'',
218 | yes:function(obj) {
219 | if (typeof opt.callback == "function") {
220 | opt.callback(true);
221 | }
222 | },
223 | no:function(obj) {
224 | if (typeof opt.callback == "function") {
225 | opt.callback(false);
226 | }
227 | }
228 | });
229 | },
230 | prompt:function(tit, con, calback) {
231 | a.luck.open({
232 | title:tit,
233 | content:'',
234 | //cloBtn:false,
235 | yes:function(obj) {
236 | if (typeof calback == "function") {
237 | calback($(obj).find("textarea").val());
238 | }
239 | },
240 | no:function(obj) {
241 | if (typeof calback == "function") {
242 | calback(false);
243 | }
244 | }
245 | });
246 | },
247 | iframe:function(tit, url, w, h) {
248 | a.luck.open({
249 | title:tit,
250 | content:''
251 | });
252 | },
253 | close:function(o) {
254 | try {
255 | if (o) {
256 | c.body.removeChild(o);
257 | } else {
258 | $(".luck-layer").remove();
259 | }
260 | } catch (e) {}
261 | }
262 | };
263 | //追加样式
264 | var style = "";
265 | function getStyle() {
266 | var obj = null, len = document.scripts.length, str = "";
267 | for (var i = 0; i < len; i++) {
268 | obj = document.scripts[i];
269 | if (obj.src.indexOf("luck.js") >= 0) {
270 | str = obj.src;
271 | break;
272 | }
273 | }
274 | return str.split("luck.js")[0] +skin.url+skin.name+'luck.css';
275 | }
276 | document.head.appendChild(function() {
277 | var a = c.createElement("link");
278 | a.href = style ? style :getStyle(), a.type = "text/css", a.rel = "styleSheet", a.id = "luckcss";
279 | return a;
280 | }());
281 | }(window);
--------------------------------------------------------------------------------
/luck/skin/default/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/waihaolaoxu/luck-pc/58d8613d50203de1e67973370f15650b20a8ba7d/luck/skin/default/icon.png
--------------------------------------------------------------------------------
/luck/skin/default/luck.css:
--------------------------------------------------------------------------------
1 | /*
2 | @ Name：luck弹层组件-pc版
3 | @ Author：前端老徐
4 | @ Date：2015/5/20
5 | @ E-mail：442413729@qq.com
6 | @ Weibo:http://weibo.com/qdlaoxu
7 | @ Github:https://github.com/waihaolaoxu
8 | @ Address:http://www.loveqiao.com/
9 | */
10 |
11 | /*屏蔽滚动条*/
12 | .hideScroll { height: 100%; overflow: hidden; }
13 | /*公共图标样式*/
14 | .luck-ico { background: url(icon.png) no-repeat; height: 14px; width: 14px; }
15 | /*主框架结构*/
16 | .luck-layer{ position:relative; z-index:9999;}
17 | .luck-box { position: fixed; min-width: 240px; max-width:960px; background-color: #fff; box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3); left: 40%; top: 150px; overflow:hidden;}
18 | .luck-full .luck-box { width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; max-width:100% !important; }
19 | .luck-box.show { animation: bouncedelay ease .2s; -webkit-animation: bouncedelay ease .3s; }
20 | .luck-move{ cursor:move;}
21 | /*.luck-box.move { opacity: 0.8; }*/
22 | .luck-title { width: 100%; background-color: #eaeaea; border-bottom: 1px solid #d5d5d5; color: #333; font-size: 14px; height: 35px; line-height: 35px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: move; -moz-user-select: none; }
23 | .luck-title span { padding-left: 10px; }
24 | .luck-box .noMove { cursor: default; }
25 | .luck-con { line-height: 22px; word-break: break-all; overflow:hidden; }
26 | .luck-shade { position: fixed; width: 100%; height: 100%; background: #000; left: 0; top: 0; opacity: 0.3; filter:alpha(opacity=30);}
27 | .luck-btn { text-align: center; padding: 10px; background:#f7f7f7; clear:both;}
28 | .luck-yes { background: #5fbfe7; border: 0; color: #fff; height: 30px; padding: 0 20px; cursor: pointer; }
29 | .luck-yes:hover { opacity: 0.9; filter: alpha(opacity=90); }
30 | .luck-no { background: #a6bbce; border: 0; color: #fff; height: 30px; padding: 0 20px; cursor: pointer; margin-left: 10px; }
31 | .luck-no:hover { opacity: 0.9; filter: alpha(opacity=90); }
32 | .luck-close { background-position: -5px -55px; position: absolute; right: 10px; top: 12px; cursor: pointer;}
33 | .luck-close:hover { background-position: -25px -55px; }
34 | .luck-resize { background-position: -45px -55px; position: absolute; right: 34px; top: 12px; cursor: pointer; }
35 | .luck-resize:hover { background-position: -95px -55px; }
36 | .luck-full .luck-resize { background-position: -68px -55px; }
37 | .luck-full .luck-resize:hover { background-position: -118px -55px; }
38 | /*模拟alert*/
39 | .luck-dialog {line-height: 25px;padding:30px 30px 25px 75px; display: block; position: relative;}
40 | .luck-dialog .luck-ico { float: left; margin: -5px 0 0 -50px; width: 40px; height: 40px; background-position: -45px 0 }
41 | .luck-dialog.luck-ico-0{ background:none; padding-left:20px; text-align:center;}
42 | .luck-dialog.luck-ico-0 .luck-ico{ display:none;}
43 | .luck-dialog.luck-ico-1 .luck-ico { background-position: 0 0; }
44 | .luck-dialog.luck-ico-2 .luck-ico { background-position: -93px 0; }
45 | .luck-dialog.luck-ico-3 .luck-ico { background-position: -144px 0; }
46 | .luck-dialog.luck-ico-4 .luck-ico { background-position: -190px 0; }
47 | .luck-dialog.luck-ico-5 .luck-ico { background-position: -238px 0; }
48 | .luck-dialog.luck-ico-6 .luck-ico { background-position: -286px 0; }
49 | /*模拟prompt*/
50 | .luck-prompt{ width:400px; height:100px; padding:5px; display:block; margin:10px; font-size:14px;border:solid 1px #eee;}
51 | /*进场动画*/
52 | @-webkit-keyframes bouncedelay { 0% {
53 | opacity:0;
54 | -webkit-transform:scale(0)
55 | }
56 | 100% {
57 | opacity:1;
58 | -webkit-transform:scale(1)
59 | }
60 | }
61 | @keyframes bouncedelay { 0% {
62 | opacity:0;
63 | transform:scale(0);
64 | -webkit-transform:scale(0)
65 | }
66 | 100% {
67 | opacity:1 transform:scale(1);
68 | -webkit-transform:scale(1)
69 | }
70 | }
71 |
--------------------------------------------------------------------------------