jQuery ios下拉通知特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery ios下拉通知特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery ios下拉通知</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <link href="css/slideme.css" type="text/css" rel="stylesheet" />
    <script src="js/jquery-2.0.2.min.js"></script>
    <script src="js/slideme.min.js"></script>
    <script>
        var now = new Date();
        var d = now.getDate();
        var m = now.getMonth();
        var y = now.getFullYear();
        var h = now.getHours();
        var mi = now.getMinutes();
        var s = now.getSeconds();

        $(document).ready(function () {
            $(".wrapper-slider").SlideMe({
                refreshAgo: true,
                ondelete: function (ids) {
                    //Do anything
                    console.log("Done. You have delete the elements with id: " + JSON.stringify(ids));
                },
                categories: [
					{
					    //id: 0 --> auto_increment
					    title: 'Private message',
					    icon: 'images/message.png'
					},
					{
					    //id: 1 --> auto_increment
					    title: 'Website update',
					    icon: 'images/update.png'
					},

                ],
                notifications: [ //Ordina in base all'h le categorie, e le news dentro ogni categoria
					{
					    id: 0,
					    category: 0,
					    title: 'Matteo Martinelli',
					    text: 'Hi guy, this is the first notification.<br>You can also write an <u><span style="font-size:20px;">HTML code</span></u>',
					    ago: new Date(y, m, d, h, mi - 5, s)

					},
					{
					    id: 1,
					    category: 0,
					    title: 'Short BIO',
					    text: 'I\'m 26 years old developer. i hope you appreciate it',
					    ago: new Date(y, m, d, h - 2, mi, s)
					},
					{
					    id: 2,
					    category: 1,
					    title: 'First release',
					    text: 'Ver. 1.0 released<br>Purchase it.',
					    ago: new Date(y, m, d - 6, h, mi - 10, s)
					},
					{
					    id: 3,
					    category: 0,
					    title: 'Bug notice',
					    text: 'Try me! I\'ve not a bug!',
					    ago: new Date(y, m - 3, d, h, mi, s - 10)
					}

                ]
            });

            $("body").css({ overflow: "auto" });

        });

    </script>
</head>
<body>
    <div class="wrapper-slider">
    </div>
    <div class="wrapper-container">
        <div class="container">
            <img src="images/home.png" />
        </div>
    </div>
</body>
</html>

JS代码(slideme.min.js):

/*! * SlideMe v1.0.0 * Docs & License:Matteo Martinelli * (c) 2013 Matteo Martinelli */
(function(e){
	var f={
	drag:false,autodrag:false,refreshAgo:true,previous:[0,0],limitsStart:40,topStart:0,refreshTime:60000,refreshAgoTime:300000,speed:[1000,2000],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],dayNamesShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],ago:["few second","m","h","d"],noNotice:"No new notification"}
;
	e.fn.SlideMe=function(h){
	e.extend(f,h);
	this.each(function(l,j){
	var k=e(j);
	var m=new c(k);
	m.render()}
);
	return this}
;
	var c=function(m){
	var x=this;
	var u=e(window);
	x.render=i;
	var n;
	var q;
	var j;
	var s;
	mouseMoveEvent=function(t){
	f.previous[0]=f.previous[1];
	f.previous[1]=t.clientY;
	if(f.drag){
	if(t.clientY>20){
	m.css({
	top:t.clientY-m.innerHeight()}
)}
if(m.position().top>0){
	m.css({
	top:0}
)}
}
}
;
	mouseUpEvent=function(){
	if(f.drag){
	f.drag=false;
	f.autodrag=true;
	if(Math.abs(f.topStart-m.position().top)<f.limitsStart){
	m.animate({
	top:f.topStart}
,f.speed[0],function(){
	m.children(".label").removeClass("mousedown");
	f.autodrag=false}
)}
else{
	if(f.previous[0]<f.previous[1]){
	m.animate({
	top:u.height()-m.height()}
,f.speed[1],function(){
	m.children(".label").removeClass("mousedown");
	f.autodrag=false}
)}
else{
	if(f.previous[0]>f.previous[1]){
	m.animate({
	top:-u.height()+20}
,f.speed[1],function(){
	m.children(".label").removeClass("mousedown");
	f.autodrag=false}
)}
else{
	m.animate({
	top:f.topStart}
,f.speed[0],function(){
	m.children(".label").removeClass("mousedown");
	f.autodrag=false}
)}
}
}
}
}
;
	mouseDownEvent=function(){
	f.drag=true;
	f.topStart=m.position().top;
	q.addClass("mousedown")}
;
	resizeEvent=function(){
	m.children(".container").css({
	height:u.innerHeight()-20}
);
	if(m.position().top==0){
	m.css({
	height:u.innerHeight(),width:u.innerWidth()}
)}
else{
	m.css({
	height:u.innerHeight(),width:u.innerWidth(),top:-(u.innerHeight()-20)}
)}
}
;
	deleteEvent=function(){
	var z=e(this).parent("div").parent("li");
	var t=z.parent("ul");
	var w=[];
	e.each(z.children("ul").children("li"),function(B,A){
	var C=A.id.replace("notification_","");
	w.push(C);
	f.notifications.splice(p(C),1)}
);
	if(z.hasClass("first")){
	z.next().addClass("first")}
z.animate({
	height:0,opacity:0}
,700,function(){
	e(this).remove();
	if(t.children("li").size()==0){
	t.html('<span class="nonotice">'+f.noNotice+"</span>")}
}
);
	if(f.ondelete){
	f.ondelete(w)}
}
;
	function i(){
	o();
	l();
	q=m.children(".label");
	n=m.children(".container").children(".content");
	j=n.children(".time");
	s=n.children(".notifications").children("ul");
	r();
	k();
	y()}
function k(){
	e(document).mousemove(mouseMoveEvent).mouseup(mouseUpEvent);
	u.resize(resizeEvent);
	q.mousedown(mouseDownEvent).hover(function(){
	if(!f.autodrag&&!f.drag){
	q.addClass("mousedown")}
}
,function(){
	if(!f.autodrag&&!f.drag){
	q.removeClass("mousedown")}
}
)}
function h(){
	var t=new Date();
	j.children(".hour").html(b(t.getHours())+":"+b(t.getMinutes()));
	j.children(".day").html(a(t.getDay()).toUpperCase()+"<br />"+g(t.getMonth()).toUpperCase()+" "+b(t.getDate())+","+t.getFullYear())}
function v(){
	e.each(f.notifications,function(A,z){
	var w=d(new Date,z.ago);
	var t="";
	if(w<60*1000){
	t=f.ago[0]+" ago"}
else{
	if(w<60*60*1000){
	t=Math.ceil(w/(60*1000))+f.ago[1]+" ago"}
else{
	if(w<24*60*60*1000){
	t=Math.ceil(w/(60*60*1000))+f.ago[2]+" ago"}
else{
	t=Math.ceil(w/(24*3600000))+f.ago[3]+" ago"}
}
}
e("#notification_"+z.id).children("div").children(".ago").text(t)}
)}
function y(){
	h();
	setInterval(h,f.refreshTime);
	if(f.refreshAgo){
	setInterval(v,f.refreshAgoTime)}
}
function o(){
	m.append('<div class="label"><div class="one"></div></div>')}
function l(){
	m.append('<div class="container"><div class="content"><div class="time"><div class="hour"></div><div class="day"></div></div><div class="notifications"><ul></ul></div></div></div>');
	m.css({
	width:u.innerWidth(),height:u.innerHeight(),top:-(u.innerHeight()-20)}
);
	m.children(".container").css({
	height:m.height()-20}
)}
function r(){
	f.notifications.sort(function(w,t){
	var A=w.ago;
	var z=t.ago;
	return z-A}
);
	e.each(f.categories,function(z,w){
	var t=e("<li>").attr("id","category_"+z);
	var A=e("<div>").addClass("head").append(e("<img>").addClass("icon").attr("src",w.icon)).append(e("<span>").text(w.title)).append(e("<div>").addClass("delete").bind("click",deleteEvent));
	t.append(A);
	var B=e("<ul>");
	e.each(f.notifications,function(H,G){
	if(G.category==z){
	var D=e("<li>").attr("id","notification_"+G.id);
	var E=d(new Date,G.ago);
	var C="";
	if(E<60*1000){
	C=f.ago[0]+" ago"}
else{
	if(E<60*60*1000){
	C=Math.ceil(E/(60*1000))+f.ago[1]+" ago"}
else{
	if(E<24*60*60*1000){
	C=Math.ceil(E/(60*60*1000))+f.ago[2]+" ago"}
else{
	C=Math.ceil(E/(24*3600000))+f.ago[3]+" ago"}
}
}
var F=e("<div>").append(e("<span>").addClass("subtitle").text(G.title)).append(e("<span>").addClass("description").html(G.text)).append(e("<span>").addClass("ago").text(C));
	B.append(D.append(F))}
}
);
	t.append(B);
	s.append(t)}
)}
function p(w){
	var t=-1;
	e.each(f.notifications,function(A,z){
	if(z.id==w&&t==-1){
	t=A}
}
);
	return t}
}
;
	function d(i,h){
	return(i.valueOf()-h.valueOf())}
function b(h){
	return(parseInt(h)<10)?"0"+h:h}
function g(h){
	return f.monthNames[h]}
function a(h){
	return f.dayNames[h]}
}
)(jQuery);

CSS代码(slideme.css):

/*! * SlideMe v1.0.0 Stylesheet * Docs & License:Matteo Martinelli * (c) 2013 Matteo Martinelli */
/* Elements HTML */
*{cursor:default;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
body{margin:0;font-family:'Segoe UI','MS Serif','New York',serif;}
p,div,ul,li{margin:0;padding:0;}
/* Container */
.wrapper-slider{z-index:9999999;position:fixed;font-family:"Segoe UI",Arial;}
.wrapper-slider .label{box-shadow:-1px -3px 7px #202020;z-index:2;position:absolute;bottom:0;height:20px;width:100%;background:url("liner.png");}
.wrapper-slider .label.mousedown{box-shadow:-1px -3px 10px #202020;cursor:s-resize;}
.wrapper-slider .label .one{cursor:s-resize;background-color:#4a4f50;height:5px;margin:7px auto 0;width:99%;border-radius:20px;}
.wrapper-slider .label.mousedown .one{background-color:#3E4A50;}
.wrapper-slider .container{overflow:auto;color:#FFF;position:absolute;top:0;height:780px;width:100%;background:url("liner.png");}
.wrapper-slider .container .content{padding:10px 0;}
/* Time */
.wrapper-slider .container .content .time{text-shadow:1px 1px 3px #FFFFFF;margin:0 auto;width:430px;height:125px;background:url("retro.png")}
.wrapper-slider .container .content .time .hour{line-height:100%;font-size:90px;float:left;margin-left:10px;margin-top:16px;}
.wrapper-slider .container .content .time .day{float:left;margin-left:20px;margin-top:29px;}
/* Notifications */
.wrapper-slider .container .content .notifications{margin-top:40px;}
.wrapper-slider .container .content .notifications ul{text-shadow:2px 1px 2px #000000;margin:10px 0 0 0;padding:0;list-style-type:none;font-size:14px;}
.wrapper-slider .container .content .notifications ul span.nonotice{display:block;text-align:center;}
.wrapper-slider .container .content .notifications ul li{padding:0;}
.wrapper-slider .container .content .notifications ul li.first{border-top:1px solid #202020;}
.wrapper-slider .container .content .notifications ul li.first div.head{border-top:1px solid rgb(77,77,77);}
.wrapper-slider .container .content .notifications ul li div.head{background:url("head.png") repeat-x;display:block;width:100%;height:40px;}
.wrapper-slider .container .content .notifications ul li div.head .icon{float:left;padding:7px 0 0 7px;}
.wrapper-slider .container .content .notifications ul li div.head .delete{background:url("delete.png") 0 0 no-repeat;float:right;margin:11px 9px 0 0;cursor:pointer;height:20px;width:20px;}
.wrapper-slider .container .content .notifications ul li div.head .delete:hover{background-position:0 -20px;}
.wrapper-slider .container .content .notifications ul li div.head span{float:left;padding-left:10px;padding-top:13px;display:block;font-weight:bold;}
/* SubNotifications */
.wrapper-slider .container .content .notifications ul li ul{border:none;list-style-type:none;margin:0;}
.wrapper-slider .container .content .notifications ul li ul li{border-bottom:1px solid rgb(77,77,77);position:relative;}
.wrapper-slider .container .content .notifications ul li ul li div{border-bottom:1px solid #202020;padding:10px 0 10px 45px;}
.wrapper-slider .container .content .notifications ul li ul li .subtitle{display:block;font-weight:bold;}
.wrapper-slider .container .content .notifications ul li ul li .description{display:block;}
.wrapper-slider .container .content .notifications ul li ul li .ago{position:absolute;right:10px;top:5px;font-weight:bold;}

CSS代码(style.css):

/*! * YourWebsite v1.0.0 Stylesheet * Docs & License:Matteo Martinelli * (c) 2013 Matteo Martinelli */
.wrapper-container{margin-top:20px;}
/* Not delete */
.wrapper-container .container{width:100%;text-align:center;}

附件:下载该文件资源,减少时间成本(增值服务)