<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#body {
width: 100%;
height: 100%;
background-color: #fff;
}
#ref {
text-align: center;
width: 100%;
overflow: hidden;
}
html,
body {
width: 100%;
height: 100%;
background-color: #f8f8f8;
}
* {
margin: 0;
padding: 0;
}
.item {
border-radius: 0.5em;
min-height: 50px;
background-color: #eee;
margin: 2px;
}
</style>
</head>
<body>
<div id="ref">刷新</div>
<div id="body">
<div class="item">
<a href="www.baidu.com">
百度一下你就知道
</a>
</div>
<div class="item">
<a href="www.bing.com">
必应国内版
</a>
</div>
<div class="item">
<a href="www.baidu.com">
百度一下你就知道
</a>
</div>
<div class="item">
<a href="www.bing.com">
必应国内版
</a>
</div>
</div>
</body>
</html>
<script>
function addPd(ele, hidden) {
if (ele && hidden) {
hidden.style.height = '0';
var start = 0;
var last = 0;
var moving = false;
var waiting = false;
function down(e) {
if (!(moving || waiting)) {
var eve = window.event || e;
waiting = false;
moving = true;
start = eve.clientY ? eve.clientY : eve.touches[0].pageY;
if (hidden)
hidden.style.height = '0';
}
}
function up(e) {
moving = false;
waiting = true;
setTimeout(function () {
start = 0;
last = 0;
waiting = false;
if (hidden)
hidden.style.height = '0';
}, 1000);
}
function move(e) {
if (moving && !waiting) {
var eve = window.event || e;
var now = eve.clientY ? eve.clientY : eve.touches[0].pageY;
var mt = (Math.max(0, now - start) / 4) + 'px';
if (hidden)
hidden.style.height = mt;
if (now < last)
up()
last = now;
}
}
ele.addEventListener('mousedown', function () {
down(); });
ele.addEventListener('mousemove', function () {
move(); });
ele.addEventListener('mouseup', function () {
up(); });
ele.addEventListener('touchstart', function () {
down(); });
ele.addEventListener('touchend', function () {
up(); });
ele.addEventListener('touchmove', function () {
move(); });
}
}
addPd(document.getElementById('body'), document.getElementById('ref'));
</script>
JS简易下拉刷新动效
猜你喜欢
转载自blog.csdn.net/dscn15848078969/article/details/112424623
今日推荐
周排行