前端常用js效果
效果
主要整理了几个常用的，方便平时做项目的时候参考
文本横向滚动
文本无限滚动
无缝轮播
无缝滚动
盒子上下滚动
樱花飘落效果
参考代码
文本横向滚动
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>横向滚动文字</title>
</head>
<body>
<div class="scroll-container">
<div class="scroll-content">
<p>这是要滚动的文本内容。</p>
</div>
</div>
<style>
.scroll-container {
width: 300px;
height: 30px;
margin: 20px auto;
border: 1px solid gray;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
}
.scroll-content {
display: inline-block;
animation: scroll 10s linear infinite;
/* 调整滚动速度，单位为秒 */
}
@keyframes scroll {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
</body>
</html>文本无限滚动
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="list">
<div>1.这是一段文字</div>
<div>2.这是一段文字</div>
<div>3.这是一段文字</div>
<div>4.这是一段文字</div>
<div>5.这是一段文字</div>
<div>6.这是一段文字</div>
<div>7.这是一段文字</div>
<div>8.这是一段文字</div>
</div>
</div>
<style>
.box {
margin: 20px auto;
width: 300px;
height: 160px;
overflow: hidden;
position: relative;
border: 1px solid gray;
}
.list {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.list>div {
width: 300px;
height: 20px;
box-sizing: border-box;
}
</style>
<script>
let list = document.querySelector(".list");
let box = document.querySelector(".box");
list.innerHTML += list.innerHTML;
let currentTop = 0;
let timer;
const move = () => {
timer = setInterval(() => {
currentTop -= 2;
if (currentTop == -(6 * 20)) {
currentTop = 0
}
list.style.top = currentTop + 'px'
}, 20)
}
move()
box.onmouseenter = () => {
clearInterval(timer)
}
box.onmouseleave = () => {
move()
}
</script>
</body>
</html>无缝轮播
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<style>
.box {
width: 320px;
height: 80px;
overflow: hidden;
position: relative;
border: 1px solid gray;
margin: 20px auto;
}
.list {
position: absolute;
left: 0;
display: flex;
align-items: center;
transition: left 0.5s ease; /* Added transition property */
}
.list>div {
width: 80px;
height: 80px;
border: 1px solid gray;
box-sizing: border-box;
}
</style>
<script>
let list = document.querySelector(".list");
list.innerHTML += list.innerHTML;
let left = 0;
setInterval(() => {
left -= 80;
if (left === -(5 * 80)) {
list.style.transition = "none"; // Remove transition
left = 0;
setTimeout(() => {
list.style.transition = "left 0.5s ease"; // Restore transition after a short delay
}, 0);
}
list.style.left = left + "px";
}, 2000);
</script>
</body>
</html>无缝滚动
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
<style>
.box {
margin: 20px auto;
width: 300px;
height: 80px;
overflow: hidden;
position: relative;
border: 1px solid gray;
}
.list {
position: absolute;
left: 0;
display: flex;
align-items: center;
}
.list>div {
width: 80px;
height: 80px;
border: 1px solid gray;
box-sizing: border-box;
}
</style>
<script>
let list = document.querySelector(".list");
let box = document.querySelector(".box");
list.innerHTML += list.innerHTML;
let left = 0;
let timer;
const move = () => {
timer = setInterval(() => {
left -= 2;
if (left == -(6 * 80)) {
left = 0
}
list.style.left = left + 'px'
}, 20)
}
move()
box.onmouseenter = () => {
clearInterval(timer)
}
box.onmouseleave = () => {
move()
}
</script>
</body>
</html>盒子上下移动
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid gray;
margin: 0 auto;
position: relative;
}
.box1 {
width: 50px;
height: 50px;
background: skyblue;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
transition: top 1s ease-in-out;
}
</style>
</body>
<script>
document.addEventListener("DOMContentLoaded", function () {
let box = document.querySelector(".box")
let box1 = document.querySelector(".box1")
setInterval(() => {
let currentTop = parseInt(window.getComputedStyle(box1).top);
let newTop = (currentTop == 0) ? box.clientHeight - box1.clientHeight : 0;
box1.style.top = newTop + 'px';
}, 1000)
})
</script>
</html>樱花飘落
添加插件sakura.js就可以了，不用什么代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<body>
<script src="https://cdn.jsdelivr.net/gh/1999cyx/[email protected]/js/sakura.js"></script>
</body>
</body>
</html>