效果如图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: #B7CBE8;
font-size: 14px;
margin: 0;
line-height: 1.5;
color: #333;
font-family: Arial, sans-serif;
}
a {
color: #34538b;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a img {
border: 0;
}
input,
select,
textarea {
font-size: 100%;
}
#header {
height: 60px;
padding: 0 0 0 40px;
background-color: #a0b3d6;
}
#header .logo {
margin-top: 12px;
overflow: hidden;
float: left;
}
.logo:empty {
width: 167px;
height: 43px;
background: url(//cdn.zhangxinxu.com/php/image/zxx_home_logo.png) no-repeat;
}
#main {
width: 100%;
background: #beceeb;
overflow: hidden;
}
#main h1 {
line-height: 40px;
margin: 0;
text-align: center;
font-size: 18px;
background: #c1d5eb;
font-family: 'kaiti', 'microsoft yahei';
text-shadow: 0px 1px 0px #f2f2f2;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#body {
padding: 0;
overflow: hidden;
}
#body .part {
width: 50%;
min-height: 400px;
_height: 400px;
background: white;
}
#code {
float: left;
margin-left: -1px;
margin-bottom: -999em;
padding-bottom: 999em;
}
#effect {
float: right;
margin-right: -1px;
margin-bottom: -999em;
padding-bottom: 999em;
}
#body h3 {
line-height: 30px;
margin: 0;
font-size: 15px;
background: #f0f3f9;
padding-left: 10px;
border-bottom: 1px solid #ededed;
color: #4e4e4e;
text-shadow: 0px 1px 0px white;
font-family: 'microsoft yahei';
}
#footer {
background: #B7CBE8;
border-top: 3px solid #A7BFE8;
line-height: 1.5;
color: #333;
font-size: 12px;
padding: 15px 0;
font-family: 'Lucida Grande', Verdana, Sans-Serif;
text-align: center;
text-shadow: 0 1px hsla(0, 0%, 100%, .3);
}
#footer img {
margin-bottom: -3px;
}
.show {
padding-bottom: 20px;
}
.show h5 {
font-size: 13px;
line-height: 20px;
padding: 10px 0 2px 2px;
margin: 0 0 0 8px;
}
.demo {
padding: 10px;
*zoom: 1;
}
.demo:after {
display: table;
content: "";
clear: both;
}
.demo .remind {
color: gray;
font-size: 12px
}
pre {
font: 14px/1.3 Consolas, Monaco, monospace;
padding: 5px 10px;
margin: 0;
white-space: pre-wrap;
word-wrap: break-word
}
#ad,
.bota {
display: block !important;
text-align: center;
}
.ad,
.topa {
height: 60px;
position: absolute;
top: 0;
right: 0;
left: 250px;
text-align: right;
overflow: hidden;
}
@media screen and (max-width: 700px) {
.ad,
.topa {
display: none;
}
}
.light {
background: #f0f3f9;
}
.description {
font-size: 12px;
color: gray;
}
#content {
min-height: 500px;
_height: 500px;
background: white;
border: solid #cad5eb;
border-width: 0 2px;
font-family: 'Lucida Grande', Verdana;
}
.article {
font-family: Arial;
padding: 10px 0;
font-size: 12px;
clear: both;
}
.article_new {
margin: -31px 10px 0 0;
line-height: 20px;
font-family: Arial;
padding: 5px 0;
font-size: 12px;
clear: both;
text-align: right;
}
.article_new a {
display: inline-block;
}
.table {
display: table;
width: 100%;
table-layout: fixed;
}
.td {
display: table-cell;
}
#back {
line-height: 40px;
margin-top: -40px;
position: absolute;
right: 20px;
padding: 0 10px 0 13px;
background-color: #fff;
animation: tada 1s 1s;
color: #cd0000;
font-size: 12px;
}
@keyframes tada {
from {
transform: scale3d(1, 1, 1)
}
10%,
20% {
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
}
30%,
50%,
70%,
90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
}
40%,
60%,
80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
}
to {
transform: scale3d(1, 1, 1)
}
}
@media screen and (max-width: 640px) {
.M #body .part {
width: auto;
float: none;
min-height: 200px;
margin: auto;
padding: 0
}
.M #back {
right: 0;
top: 10px;
margin-top: 0;
}
.M #header {
padding-left: 0;
}
.td {
display: table;
}
video[width^="4"],
video[width^="5"],
video[width^="6"],
video[width^="7"],
video[width^="8"],
video[width^="9"] {
max-width: 100%;
height: auto;
}
img:not([width]),
video:not([width]) {
max-width: 100%;
height: auto;
}
}
.m-bota {
height: 100px;
text-align: center;
}
@media print {
.ad,
.topa,
#back,
#ad,
.bota {
display: none !important;
}
#effect {
margin-bottom: 0;
padding-bottom: 0;
}
}
body.preview #header,
body.preview #main h1,
body.preview #main>a,
body.preview #code,
body.preview #footer,
body.preview #effect>h3 {
display: none;
}
body.preview #effect {
width: auto;
float: none;
}
body.preview {
background: none;
}
/* Generics */
.DlHighlight .keyword {
color: #00f;
}
.DlHighlight .builtin {
color: #22c;
}
.DlHighlight .string {
color: #282;
}
.DlHighlight .string .before,
.DlHighlight .string .after {
color: #040;
}
.DlHighlight .regexp {
color: #b2c;
}
.DlHighlight .regexp .before,
.DlHighlight .regexp .after {
color: #509;
}
.DlHighlight .comment {
color: #c22;
}
.DlHighlight .comment-line {
color: #999;
}
.css .comment-line {
color: #22c;
}
.DlHighlight .comment .before,
.DlHighlight .comment .after {
color: #baa;
}
.DlHighlight .comment-multiline {
color: #999;
}
.DlHighlight .comment-multiline .before,
.DlHighlight .comment-multiline .after {
color: #999;
}
.DlHighlight .hashkey {
color: #a51;
}
.DlHighlight .hasharrow {
color: #f00;
}
.DlHighlight .paren {
color: #000099;
}
.DlHighlight .operator {
color: #077;
}
.DlHighlight .error {
background-color: #c00;
color: #fff;
}
.DlHighlight .defun {}
.DlHighlight .line-numbers {
float: left;
margin-left: -4.5em;
width: 3em;
text-align: right;
color: #999;
font: 0.9em tahoma, verdana, sans-serif;
padding-top: 0.05em;
}
.DlHighlight .line-numbers:after {
content: "."
}
/* XML */
.DlHighlight .xml-tag-close .before {
color: #52a;
}
.DlHighlight .xml-entity {
color: #b2a;
}
.DlHighlight .xml-entity .before,
.DlHighlight .xml-entity .after {
color: #607;
}
.DlHighlight .xml-tag {
font-weight: normal;
}
/* CSS */
.DlHighlight .css-block-open,
.DlHighlight .css-block-close {
color: #f0f;
}
.DlHighlight .css-class {
color: #f0f;
}
.DlHighlight .css-pseudo-class {
color: #f0f;
}
.DlHighlight .css-id {
color: #ff00ff;
}
.DlHighlight .css-color-spec {
color: #0000ff;
}
.DlHighlight .css-length {
color: #0000ff;
}
.DlHighlight .css-length .after {}
.DlHighlight .css-declaration-kw {
color: #000099;
}
.DlHighlight .css-comma {
color: red;
}
.list::-webkit-scrollbar {
display: none;
}
.list {
display: flex;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
overflow-y: hidden;
}
.content {
padding: .5rem 1rem;
line-height: 1.5;
flex: 0 0 calc(100vw - 2rem);
font-size: 1rem;
color: inherit;
background-color: #fff;
box-shadow: 0 1px #fff, 0 -1px #fff;
position: relative;
}
.space {
flex: 0 0 4rem;
}
.button {
border: 0;
padding: 0;
font-size: 1rem;
color: #fff;
width: 4rem;
height: 2.5rem;
position: absolute;
right: 0;
outline: 0;
}
[data-type="danger"] {
background-color: #eb4646;
}
[data-type="warning"] {
background-color: #f59b00;
}
/* 自动右边缘定位 */
.scroll-snap {
scroll-snap-type: x mandatory;
}
.scroll-snap .space {
scroll-snap-align: end;
}
.scroll-snap .content {
scroll-snap-align: start;
}
/* 多个按钮定位 */
.button:nth-of-type(2) {
right: 4rem;
}
.button:nth-of-type(3) {
right: 8rem;
}
.space:nth-child(4) {
flex: 0 0 8rem;
}
.space:nth-child(5) {
flex: 0 0 12rem;
}
/* 视差滚动 */
.perspective {
perspective: 1px;
transform-style: preserve-3d;
perspective-origin: 100% 50%;
}
.perspective .button:last-of-type {
transform: translate3D(2rem, 0, -1px) scale(2);
}
.perspective .button:first-of-type {
transform: translate3D(2rem, 0, -3px) scale(4);
}
</style>
</head>
<body>
<div>
<h4>1. 纯滚动</h4>
<div class="list">
<button class="button" data-type="danger">删除</button>
<a href="javascript:" class="content">我是列表,试试左滑我</a>
<s class="space"></s>
</div>
<h4>2. 带定位滚动</h4>
<div class="list scroll-snap">
<button class="button" data-type="danger">删除</button>
<a href="javascript:" class="content">我是列表,试试左滑我</a>
<s class="space"></s>
</div>
<h4>3. 多个按钮定位滚动</h4>
<div class="list scroll-snap">
<button class="button" data-type="danger">删除</button>
<button class="button" data-type="warning">不显示</button>
<a href="javascript:" class="content">我是列表,试试左滑我</a>
<s class="space"></s>
</div>
<h4>4. 多个按钮定位视差滚动</h4>
<div class="list scroll-snap perspective">
<button class="button" data-type="danger">删除</button>
<button class="button" data-type="warning">不显示</button>
<a href="javascript:" class="content">我是列表,试试左滑我</a>
<s class="space"></s>
</div>
</div>
</body>
</html>