JavaScript+CSS的移动端3D翻转刷新【原创】

查看演示 下载资源 下载积分： 60 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分先引入一个CSS文件，用于显示顶部的部分图标，代码如下：

<!--<link type="text/css" rel="stylesheet" href="css/material-design-iconic-font.min.css">本地调用-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"><!--远程调用-->

接着设置好页面各元素的显示样式，样式内容有点多，这里只贴出部分代码：

body {
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  color: #444;
  background-color: transparent;
  background-image: linear-gradient(110deg, #663b7d 0%, #92aacf 100%);
}

.wrap {
  background-color: #e5e5e5;
  position: relative;
  display: block;
  height: 610px;
  width: 365px;
  margin: 10px auto;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border-radius: 0 0 3px 3px;
}

.wrap.loading .content { margin-top: 30px; }
.wrap.loading .loader { display: block; }
.wrap.loading .headbar button { animation: rotate .8s linear infinite; }

.bar {
	height: 3px;
	background-color: #1976d8;
}

.headbar {
	height: 60px;
	background-color: #00a2ff;
	color: #fff;
}

.headbar button {
	float: right;
    margin: 12px;
    border: none;
    background: transparent;
    outline: none;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
}

.headbar h3 {
	margin: 0;
    padding: 12px 15px;
    font-size: 22px;
    font-weight: 400;
}

.headbar h3 i { margin-right: 10px; }

.content {
	position: relative;
	height: calc(100% - 90px);	
	margin-top: 5px;
    margin-left: 5px;
    width: 100%;
    transition: margin-top 0.4s ease-in-out;
}

页面body部分结构比较简单，元素多放置在div容器里，代码如下：

<div class="wrap">
	<div class="bar"></div>
	<div class="headbar">
		<button onclick="refershTiles()"><i class="zmdi zmdi-refresh"></i></button>
		<h3><i class="zmdi zmdi-menu"></i>3D翻转更新</h3>
	</div>
	<div class="loader">加载中...</div>
	<div class="content" data-pos="0"></div>
</div>

页面的底部需要对加载数据进行处理，还要响应点击刷新的事件，以下贴出部分代码：

var tiles = [];

for (var i = 0; i < 9; i++) {
	var {bg, name, artist, url} = getTracks()[i];
	var d2 = getTracks()[i+8];
	var d3 = getTracks()[16-i];
	var d4 = getTracks()[9-i];

	var tile = 
		`<div class="tile">
			<div class="tile-wrap" style="transition-delay:${70*i}ms;">
				<div style="background-color: ${bg}; color: ${contrastYIQ(bg)}">
					<header style="background-image:url(${url})"></header>
					<section><span>${name}</span><small>${artist}</small></section>
				</div>
				<div style="background-color: ${d2.bg}; color: ${contrastYIQ(d2.bg)}">
					<header style="background-image:url(${d2.url})"></header>
					<section><span>${d2.name}</span><small>${d2.artist}</small></section>
				</div>
				<div style="background-color: ${d3.bg}; color: ${contrastYIQ(d3.bg)}">
					<header style="background-image:url(${d3.url})"></header>
					<section><span>${d3.name}</span><small>${d3.artist}</small></section>
				</div>
				<div style="background-color: ${d4.bg}; color: ${contrastYIQ(d4.bg)}">
					<header style="background-image:url(${d4.url})"></header>
					<section><span>${d4.name}</span><small>${d4.artist}</small></section>
				</div>
			</div>
		</div>`;

	tiles.push(tile);
}

var $content = document.querySelector('.content');
$content.innerHTML = tiles.join('');

function refershTiles() {
	var $wrap = document.querySelector('.wrap'),
		pos = parseInt($content.getAttribute('data-pos')),
		next = (pos + 1 > 3)? 0 : pos + 1;

	$wrap.classList.add('loading');
	setTimeout(() => {
		$wrap.classList.remove('loading');
		$content.setAttribute('data-pos', next);
	}, 2400);
}