看看这个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<style>
.parallax-banner-wrapper {
height: 320px;
position: relative;
}
.parallax-banner {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 200px;
position: relative;
}
.parallax-banner img {
width: 100%;
}
.parallax-banner-overlay {
position: absolute;
width: 100%;
top: 0;
bottom: -50px;
/*设置该背景图片是为了解决图片颜色与文字相近时，文字看不清楚，该背景图片应该是前半部透明，下半部渐黑，这样白色黑子可以较为清晰的显示*/
/*background-image: url(../images/bg.png);
background-repeat: repeat-x;
background-size: contain;*/
}
.parallax-banner-title {
position: absolute;
left: 15px;
bottom: 135px;
width: 90%;
font-size: 16px;
font-weight: 400;
line-height: 21px;
color: white;
}
.parallax-content {
-webkit-transform: translateY(-120px);
transform: translateY(-120px);
margin-bottom: -120px;
background: #efeff4;
}
</style>
</head>
<body>
<div id="scroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="parallax-banner-wrapper">
<div id="parallax" class="parallax-banner">
<img src="../images/fast.jpg" />
<div class="parallax-banner-overlay"></div>
</div>
<h2 class="parallax-banner-title"></h2>
</div>
<div class="parallax-content">
<div style="margin:150px 20px 500px;">
<p>这是视差滚动的示例，向下拖拽本页面，你会看到上方图片逐渐变大；</p>
</div>
<ul id="tableview" class="mui-table-view">
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack:true //启用右滑关闭功能
});
(function($) {
var scrollEl = document.getElementById("scroll");
var scrollApi = $(scrollEl).scroll({
parallaxElement: '#parallax',
parallaxRatio: 0.5
});
// document.getElementById("tableview").appendChild(createFragment(50));
})(mui);
function createFragment(count) {
var fragment = document.createDocumentFragment();
var li;
for (var i = 0; i < count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '列表项-' + (i + 1);
fragment.appendChild(li);
}
return fragment;
};
</script>
</body>
</html>
1 个回复
k***@126.com
看看这个例子