逐行向上滚动 类似中奖名单的小例子
作者：互联网
alertPopShow.js 文件
/** mobile web toast、alert、confirm提示框
* 2016.05.25 ghb
* toast使用方式：
* webToast("屌丝逆袭了","bottom",1000);
* webToast("出任SEO","bottom");
* webToast("赢取白富美",1000);
* webToast("走向人生巅峰");
*
* alert、confirm使用方式：
* popTipShow.alert('弹窗标题',['知道了'],function(e){//do something})
* popTipShow.confirm('弹窗标题','自定义弹窗内容，居左对齐显示，告知需要确认的信息等',['确 定','取 消'],function(e){//do something})
*/
function compareVersion(v1, v2) {
v1 = v1.toString().split(".");
v2 = v2.toString().split(".");
for (var i = 0; i < v1.length || i < v2.length; i++) {
var n1 = parseInt(v1[i], 10),
n2 = parseInt(v2[i], 10);
if (window.isNaN(n1)) {
n1 = 0
}
if (window.isNaN(n2)) {
n2 = 0
}
if (n1 < n2) {
return -1
} else {
if (n1 > n2) {
return 1
}
}
}
return 0
}
function callback(func, result) {
var ua = navigator.userAgent,
isAndroid = (/Android/i).test(ua),
osVersion = ua.match(/(?:OS|Android)[\/\s](\d+[._]\d+(?:[._]\d+)?)/i)
if (isAndroid && compareVersion(osVersion, "2.4.0") < 0) {
setTimeout(function() {
func && func(result)
}, 1)
} else {
func && func(result)
}
}
(function(e) {
if (void 0 == window.define) {
var d = {},
h = d.exports = {};
e(null, h, d);
window.popTipShow = window.notification = d.exports
} else define(e)
})(function(require, exports, module) {
function e(a) {
this._options = d.extend({
mode: "msg",
text: "\u7f51\u9875\u63d0\u793a",
useTap: !1
}, a || {});
this._init()
}
var d = $,
h = d(window),
c = d('<div class="c-float-popWrap msgMode hide">'+
'<div class="weui_mask_transparent"></div>'+
'<div class="c-float-modePop">'+
'<div class="warnMsg"></div>'+
'<div class="content"></div>'+
'<div class="doBtn">'+
'<button class="cancel">\u53d6\u6d88</button>'+
'<button class="ok">\u786e\u5b9a</button>'+
'</div>'+
'</div>'+
'</div>'),
//c = d('<div class="error-tips hide"><p class="warnMsg"></p></div>'),
m = c.find(".warnMsg"),
n = c.find(".content"),
o = c.find(".doBtn .ok"),
p = c.find(".doBtn .cancel"),
j = !1,
f;
d.extend(e.prototype, {
_init: function() {
var a = this,
b = a._options,
g = b.mode,
k = b.text,
e = b.content,
f = b.callback,
l = b.background,
t = b.btns,
b = b.useTap ? "tap" : "click",
i = c.attr("class"),
i = i.replace(/(msg|alert|confirm)Mode/i, g + "Mode");
c.attr("class", i);
l && c.css("background", l);
k && m.html(k);
e && n.html(e);
t && o.html(t[0]);
t && p.html(t[1]);
if("alert"==g){//解决一个按钮时的宽度
o.css("width", "100%");
}else{
o.css("width", "");
}
o.off(b).on(b, function(b) {
f.call(a, b, !0);
});
p.off(b).on(b, function(b) {
f.call(a, b, !1)
});
j || (j = !0, d("body").append(c), h.on("resize",
function() {
setTimeout(function() {
a._pos()
}, 500)
}))
},
_pos: function() {
var a = document,
b = a.documentElement,
g = a.body,
e, d, f;
this.isHide() || (a = g.scrollTop, g = g.scrollLeft, e = b.clientWidth, b = b.clientHeight, d = c.width(), f = c.height(), c.css({
top: a + (b - f) / 2,
left: g + (e - d) / 2
}))
},
isShow: function() {
return c.hasClass("show")
},
isHide: function() {
return c.hasClass("hide")
},
_cbShow: function() {
var a = this._options.onShow;
c.css("opacity", "1").addClass("show");
a && a.call(this)
},
show: function() {
var a = this;
f && (clearTimeout(f), f = void 0);
a.isShow() ? a._cbShow() : (c.css("opacity", "0").removeClass("hide"), a._pos(), setTimeout(function() {
a._cbShow()
}, 300), setTimeout(function() {
c.animate({
opacity: "1"
}, 300, "linear")
}, 1))
},
_cbHide: function() {
var a = this._options.onHide;
c.css("opacity", "0").addClass("hide");
a && a.call(this)
},
hide: function() {
var a = this;
a.isHide() ? a._cbHide() : (c.css("opacity", "1").removeClass("show"), setTimeout(function() {
a._cbHide()
}, 300), setTimeout(function() {
c.animate({
opacity: "0"
}, 300, "linear")
}, 1))
},
flash: function(a) {
var b = this;
opt = b._options;
opt.onShow = function() {
f = setTimeout(function() {
f && b.hide()
}, a)
};
b.show()
}
});
module.exports = new function() {
this.simple = function(a, b, c) {
2 == arguments.length && "number" == typeof arguments[1] && (c = arguments[1], b = void 0);
var d = new e({
mode: "msg",
text: a,
background: b
});
d.flash(c || 2E3);
return d
};
this.msg = function(a, b) {
var d = new e({
mode: "msg",
text: a
});
d.show();
return d
};
this.alert = function(a, s, b, c) {
var d = new e({
mode: "alert",
text: a,
content: s,
btns:b,
callback: c
});
d.show();
return d
};
this.confirm = function(a, b, c, f) {
var d = new e({
mode: "confirm",
text: a,
content: b,
btns:c,
callback: f
});
d.show();
return d
};
this.pop = function(a) {
return new e(a)
}
}
});
/** mobile web toast提示框
* 使用方式：
* webToast("屌丝逆袭了","bottom",1000);
* webToast("出任SEO","bottom");
* webToast("赢取白富美",1000);
* webToast("走向人生巅峰");
*/
function webToast() {
//默认设置
var dcfg={
msg:"提示信息",
postion:"top",//展示位置，可能值：bottom,top,middle,默认top：是因为在mobile web环境下，输入法在底部会遮挡toast提示框
time:3000,//展示时间
};
//*********************以下为参数处理******************
var len = arguments.length;
var arg0 =arguments[0];
if(arguments.length>0){
dcfg.msg =arguments[0];
dcfg.msg=arg0;
var arg1 =arguments[1];
var regx = /(bottom|top|middle)/i;
var numRegx = /[1-9]\d*/;
if(regx.test(arg1)){
dcfg.postion=arg1;
}else if(numRegx.test(arg1)){
dcfg.time=arg1;
}
var arg2 =arguments[2];
var numRegx = /[1-9]\d*/;
if(numRegx.test(arg2)){
dcfg.time=arg2;
}
}
//*********************以上为参数处理******************
var ret = "<div class='web_toast'><div class='cx_mask_transparent'></div>" + dcfg.msg + "</div>";
if ($(".web_toast").length <= 0) {
$("body").append(ret);
} else {//如果页面有web_toast 先清除之前的样式
$(".web_toast").css("left","");
ret = "<div class='cx_mask_transparent'></div>" + dcfg.msg;
$(".web_toast").html(ret);
}
var w = $(".web_toast").width(),ww = $(window).width();
$(".web_toast").fadeIn();
$(".web_toast").css("left",(ww-w)/2-20);
if("bottom"==dcfg.postion){
$(".web_toast").css("bottom",50);
$(".web_toast").css("top","");//这里为什么要置空，自己琢磨，我就不告诉
}else if("top"==dcfg.postion){
$(".web_toast").css("bottom","");
$(".web_toast").css("top",50);
}else if("middle"==dcfg.postion){
$(".web_toast").css("bottom","");
$(".web_toast").css("top","");
var h = $(".web_toast").height(),hh = $(window).height();
$(".web_toast").css("bottom",(hh-h)/2-20);
}
setTimeout(function() {
$(".web_toast").fadeOut();
}, dcfg.time);
}
标签：function,toast,滚动,web,中奖,css,&&,var,逐行 来源： https://www.cnblogs.com/webSnow/p/15556942.html