Localstorage 本地存储几个方法 点击以外隐藏 滚动animate. 移动端适配rem
<button onclick="showModal()">显示弹窗</button>
<div id="myModal">
<p>这是弹窗内容</p>
<span id="asd">
asdas
</span>
</div>
<script>
// 获取弹窗和按钮
var modal = document.getElementById('myModal');
var btn = document.querySelector('button');
// 当按钮被点击时显示弹窗
function showModal() {
modal.style.display = 'block';
// 点击弹窗外的地方隐藏弹窗
window.addEventListener('click', function(event) {
// modal.contains(event.target) 是否是他的子孙
if (!modal.contains(event.target) && event.target !== btn) {
modal.style.display = 'none';
}
});
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
:root {
--animate-delay: .2s;
}
body {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-content: center;
flex-wrap: wrap;
}
.animate__animated{opacity: 1;}
.your-div {
* 设置每个滚动部分的高度 */
/* 这里可以添加其他样式 */
background-color: red;opacity: 0;
height:400px;
width: 300px;
background-color: aqua;
margin: 3rem auto;
border: 1px solid pink;
}
</style>
</head>
<body><div class="your-div ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div class="your-div ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div class="your-div ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div class="your-div ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div class="your-div ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div class="your-div ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div class="your-div ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div class="your-div ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div class="your-div ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div class="your-div ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div class="your-div ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div class="your-div ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div>
<script>
// 当页面加载完毕时
$(document).ready(function() {
// 监听滚动事件
$(window).scroll(function() {
// 遍历每个 your-div 元素
$('.your-div').each(function() {
// 获取当前元素
var animatedDiv = $(this);
// 获取元素的位置信息
var rect = animatedDiv[0].getBoundingClientRect();
// 如果元素可见，添加动画类
if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
animatedDiv.addClass('animate__animated animate__fadeInDown ');
} else {
}
});
});
// 触发一次滚动事件，以确保初始状态也能触发动画
$(window).scroll();
});
</script>
</body>
</html>
引入wow.js 更好
引入aos.js 支持上滑隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link rel="stylesheet" href="dist/aos.css" />
<style>
:root {
--animate-delay: .2s;
}
body {
background: url(11.jpg);
align-content: center;
flex-wrap: wrap;
}
.your-div {
height:460px;
width: 150px;
background-color: aqua;
margin: 3rem auto;
border: 1px solid pink;
}
</style>
</head>
<body><div style="margin-top:20rem" aos="fade-right" class="your-div wow animate__animated animate__fadeInDown ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div aos="fade-right" class="your-div wow animate__animated animate__backInLeft ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div aos="flip-left" class="your-div wow animate__animated animate__fadeInDown ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div aos="flip-left" class="your-div wow animate__animated animate__backInRight ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div aos="flip-right" class="your-div wow animate__animated animate__fadeInDown ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div aos="flip-right" class="your-div wow animate__animated animate__fadeInDown ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div aos="fade-right" class="your-div wow animate__animated animate__fadeInDown ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div aos="fade-right" class="your-div wow animate__animated animate__fadeInDown ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div aos="fade-right" class="your-div wow animate__animated animate__fadeInDown ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div aos="fade-right" class="your-div wow animate__animated animate__fadeInDown ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div aos="fade-right" class="your-div wow animate__animated animate__fadeInDown ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div><div aos="fade-right" class="your-div wow animate__animated animate__fadeInDown ">010101010
<!-- 这是第二个你想要加载动画的 div -->
</div>
<script src="dist/aos.js"></script>
<script>
AOS.init({
easing: 'ease-out-back',
AosOffset:200,
duration:1000,
duration: 1000
});
</script>
</body>
</html>
移动端适配Rem
浙公网安备 33010602011771号