<?php
function counttime($time){
$now = time();
$time = strtotime($time);
$subtime = $now - $time;
$return = "刚刚";
if($subtime < 60){
} elseif($subtime < 3600) {
//显示分钟
$return = floor($subtime/(60*1)) . "分钟前";
} elseif($subtime < (3600*24)) {
//显示小时
$return = floor($subtime/(3600*1)) . "小时前";
} elseif($subtime < (3600*24*30)) {
//显示天
$return = floor($subtime/(3600*24)) . "天前";
} elseif($subtime < (3600*24*365)) {
//显示月
$return = floor($subtime/(3600*24*30)) . "个月前";
} elseif($subtime < (3600*24*365*1000)) {
//显示年
$return = floor($subtime/(3600*24*365)) . "年前";
}
return $return;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
<title>朋友圈</title>
<link rel="stylesheet" href="./css/app.css">
<link rel="stylesheet" href="./css/weui.min.css">
<link rel="stylesheet" href="./css/jquery-weui.min.css">
<script type="text/javascript" src="./js/iscroll-probe.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-weui.min.js"></script>
<!-- <script type="text/javascript" src="./js/jquery-weui-preload.js"></script> -->
<script type="text/javascript">
var items_per_page = 10;
var scroll_in_progress = false;
var myScroll;
var auto_increament = 1;
load_content = function(refresh, next_page) {
// This is a DEMO function which generates DEMO content into the scroller.
// Here you should place your AJAX request to fetch the relevant content (e.g. $.post(...))
console.log(refresh, next_page);
var time = 1000;
if (next_page == undefined || next_page == "undefined" || next_page == null)
{
time = 100;
}
setTimeout(function() {
// This immitates the CALLBACK of your AJAX function
if (!refresh) {
// Loading the initial content
for (var i=0; i<2; i++)
{
//$('#wrapper > #scroller > ul').append('<li class="temp_li">初始化的数据'+(auto_increament+i)+'</li>');
$('#wrapper > #scroller > ul').append('<li></li>');
auto_increament++;
}
} else if (refresh && !next_page) {
// Refreshing the content
/*
$('#wrapper > #scroller > ul').html('');
for (var i=0; i<10; i++)
{
$('#wrapper > #scroller > ul').append('<li>下拉刷新的数据'+(auto_increament+i)+'</li>');
auto_increament++;
}
*/
} else if (refresh && next_page) {
// Loading the next-page content and refreshing
for (var i=0; i<10; i++)
{
$('#wrapper > #scroller > ul').append('<li style="text-align:center;line-height: 40px;font-size: 14px;"><a href="http://weibo.com/208630004">点击打开我的微博</a>'+(auto_increament+i)+'</li>');
auto_increament++;
}
}
if (refresh) {
myScroll.refresh();
pullActionCallback();
} else {
if (myScroll) {
myScroll.destroy();
$(myScroll.scroller).attr('style', '');
// Required since the styles applied by IScroll might conflict with transitions of parent layers.
myScroll = null;
}
trigger_myScroll();
}
},
time);
};
function pullDownAction() {
load_content('refresh');
$('#wrapper > #scroller > ul').data('page', 1);
// Since "topOffset" is not supported with iscroll-5
$('#wrapper > .scroller').css({
top: 0
});
}
function pullUpAction(callback) {
if ($('#wrapper > #scroller > ul').data('page')) {
var next_page = parseInt($('#wrapper > #scroller > ul').data('page'), 10) + 1;
} else {
var next_page = 2;
}
load_content('refresh', next_page);
$('#wrapper > #scroller > ul').data('page', next_page);
if (callback) {
callback();
}
}
function pullActionCallback() {
if (pullDownEl && pullDownEl.className.match('loading')) {
pullDownEl.className = 'pullDown';
//pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh';
myScroll.scrollTo(0, parseInt(pullUpOffset) * ( - 1), 200);
} else if (pullUpEl && pullUpEl.className.match('loading')) {
$('.pullUp').removeClass('loading').html('');
}
}
var pullActionDetect = {
count: 0,
limit: 10,
check: function(count) {
if (count) {
pullActionDetect.count = 0;
}
// Detects whether the momentum has stopped,and if it has reached the end - 200px of the scroller - it trigger the pullUpAction
setTimeout(function() {
if (myScroll.y <= (myScroll.maxScrollY + 200) && pullUpEl && !pullUpEl.className.match('loading')) {
$('.pullUp').addClass('loading').html('<span class="pullUpIcon"> </span><span class="pullUpLabel">加载中……</span>');
pullUpAction();
} else if (pullActionDetect.count < pullActionDetect.limit) {
pullActionDetect.check();
pullActionDetect.count++;
}
},
200);
}
}
function trigger_myScroll(offset) {
pullDownEl = document.querySelector('#wrapper .pullDown');
if (pullDownEl) {
pullDownOffset = pullDownEl.offsetHeight;
} else {
pullDownOffset = 0;
}
pullUpEl = document.querySelector('#wrapper .pullUp');
if (pullUpEl) {
pullUpOffset = pullUpEl.offsetHeight;
} else {
pullUpOffset = 0;
}
if ($('#wrapper ul > li').length < items_per_page) {
// If we have only 1 page of result - we hide the pullup and pulldown indicators.
$('#wrapper .pullDown').hide();
$('#wrapper .pullUp span').hide();
offset = 0;
} else if (!offset) {
// If we have more than 1 page of results and offset is not manually defined - we set it to be the pullUpOffset.
offset = pullUpOffset;
}
myScroll = new IScroll('#wrapper', {
HTML5仿微信朋友圈UI界面，免费下载
需积分: 5 22 浏览量
2024-05-26
18:16:11
上传
评论
收藏 1.07MB ZIP 举报
朋友圈.zip （43个子文件） 
js 
jquery-weui.min.js 54KB iscroll-probe.js 49KB jquery-weui-preload.js 3KB jquery.min.js 94KB css main.css 1KB jquery-weui.min.css 53KB app.css 7KB weui.min.css 35KB
index.html 40KB images 
ads.png 520B
a2.jpg 2KB pull_to_refresh - 副本.png 2KB c1.jpg 21KB c2.jpg 6KB c.png 2KB 0.png 320KB a1.jpg 1KB a3.jpg 3KB xa1.jpg 5KB timg.jpg 18KB bg.jpg 84KB n5.jpg 2KB link.png 768B 0.jpg 68KB c3.jpg 6KB pull_to_refresh - 副本 (2).png 4KB bq1.png 2KB share_icon.png 547B c8.jpg 81KB jt1.jpg 22KB l.png 3KB asd888.jpg 157KB yt3.jpg 9KB a4.jpg 2KB a7.jpg 2KB bg - 副本.jpg 98KB guide2.png 29KB pull_to_refresh.png 4KB w570b81.jpg 30KB 130591522.jpg 28KB c4.jpg 5KB ma1.jpg 5KB a5.jpg 4KB资源评论
