<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置视窗大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 按照ie版本渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 双内核浏览器按照极速模式(谷歌内核)渲染 -->
<meta name="renderer" content="webkit">
<title>bootstrap</title>
<!-- <link rel="stylesheet" href="../dist/css/bootstrap.css"> -->
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<style>
.sec {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh / 3);
font-size: 80px;
box-shadow: 50px 50px 100px 20px rgba(0, 0, 0, .6) inset,
-50px -50px 100px 20px rgba(0, 0, 0, .6) inset,
50px -50px 100px 20px rgba(0, 0, 0, .6) inset,
-50px 50px 100px 20px rgba(0, 0, 0, .6) inset,
2px 2px 5px #fff;
text-shadow: 3px 3px 3px #fff,
3px 3px 3px #ccc;
background-image: radial-gradient(circle, rgba(0, 0, 255, .8), rgba(255, 0, 0, .5), rgba(0, 255, 0, .6), rgba(255, 255, 0, .6));
/* filter: blur(1px); */
}
.sec span {
color: #000;
-webkit-box-reflect: below -45px -webkit-linear-gradient(top, transparent 50%, rgba(0, 0, 0, .6));
}
.rotate {
animation: rotate 1s linear infinite;
}
.zoomIn {
animation: scale .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes scale {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.alert {
margin: 0;
}
</style>
</head>
<body>
<div class="sec"><span class="zoomIn">10</span></div>
<div class="sec"><span class="zoomIn">9</span></div>
<div class="sec"><span class="zoomIn">8</span></div>
<div class="sec"><span class="zoomIn">7</span></div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!-- <script src="../dist/js/jquery-2.1.0.js"></script>
<script src="../dist/js/bootstrap.js"></script> -->
<script>
//全局变量
var count = 7, timer, noData = true;
//判断文档位置
function onReachBottom(callback) {
//文档的高度
var docHeight = $(document).height();
//窗口的高度
var winHeight = $(window).height();
//滚动条滚动的距离
var scrollTop = $(window).scrollTop();
//判断是否到达文档底部
if (docHeight - winHeight - scrollTop < 200) {
console.log("我是有底线的");
callback()
}
}
//添加警示框
function appendAlert() {
//判断警示框是否含有长度
if (!$("#alert").length) {
//判断警告框的内容
var msg = noData ? '<i class="glyphicon glyphicon-refresh rotate"></i>' : '我是有底线的!!!';
//判断警告框的的类名
var alertClass = noData ? "info" : "danger";
//先把警告框存起来
var alert =
'<div id="alert" class="alert fade in alert-' + alertClass + ' text-center">\
'+ msg + '\
<button class="close" data-dismiss="alert">×</button>\
</div>'
//把警告插入到文档中
$('body').append(alert);
}
}
//加数字容器
function appendSection() {
//把需要插入的数字存起来
var sec = '<div class="sec"><span>' + --count + '</span></div>';
//把数字插到文档中
$("body").append(sec);
//把之前插入的警示框移除
$("#alert").remove();
}
//给span标签加类名
function addClassSpan() {
//找出加载出来的span标签
var $lastSpan = $(".sec:last").find("span");
//给span标签加类名
if (!$lastSpan.hasClass("zoomIn")) $lastSpan.addClass("zoomIn");
}
/* //防抖
function debounce(callback) {
clearTimeout(timer);
timer = setTimeout(function () {
callback()
}, 1000)
} */
//节流
function throttle(callback) {
if (!timer) {
timer = setTimeout(function () {
callback();
timer = false;
}, 500)
}
}
//加载更多方法集合
function loadMore() {
//当加载内容的数为0 时停止加载
if (count <= 0) {
if (noData) {
//关闭开关
noData = false;
appendAlert();
// addClassSpan();
// appendSection();
}
//达到条件是关闭函数
return false;
}
appendAlert();
throttle(appendSection);
addClassSpan();
}
//滚动条移动时执行函数
$(window).on("scroll", function () {
onReachBottom(loadMore)
})
</script>
</body>
</html>
js上拉加载更多
最新推荐文章于 2024-06-05 07:15:00 发布