当前位置：首页 > news >正文

常州做网站建设的公司张泽华营销

news 2025/9/17 11:40:54

常州做网站建设的公司,张泽华营销,wordpress占用空间,wordpress 3d云标签前端常用js效果效果参考代码文本横向滚动文本无限滚动无缝轮播无缝滚动盒子上下移动樱花飘落效果主要整理了几个常用的，方便平时做项目的时候参考文本横向滚动文本无限滚动无缝轮播无缝滚动盒子上下滚动樱花飘落效果参考代码文本横向滚动 <!DOCTYP…

前端常用js效果

- - 效果
  - 参考代码
  - 文本横向滚动
  - 文本无限滚动
  - 无缝轮播
  - 无缝滚动
  - 盒子上下移动
  - 樱花飘落

效果

主要整理了几个常用的，方便平时做项目的时候参考

文本横向滚动
文本无限滚动
无缝轮播
无缝滚动
盒子上下滚动
樱花飘落效果

参考代码

文本横向滚动

<!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>

文本无限滚动

<!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>

无缝轮播

<!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 transitionleft = 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>

无缝滚动

<!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>

盒子上下移动

<!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就可以了，不用什么代码

<!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/cdn@2.0/js/sakura.js"></script></body>
</body></html>