前端常用js效果
效果
主要整理了几个常用的，方便平时做项目的时候参考
文本横向滚动
文本无限滚动
无缝轮播
无缝滚动
盒子上下滚动
樱花飘落效果
参考代码
文本横向滚动
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="styles.css"><title>横向滚动文字</title></head><body><divclass="scroll-container"><divclass="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>
文本无限滚动
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divclass="box"><divclass="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;constmove=()=>{
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>
无缝轮播
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divclass="box"><divclass="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>
无缝滚动
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divclass="box"><divclass="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;constmove=()=>{
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>
盒子上下移动
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divclass="box"><divclass="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就可以了，不用什么代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><body><scriptsrc="https://cdn.jsdelivr.net/gh/1999cyx/[email protected]/js/sakura.js"></script></body></body></html>
本文转载自: https://blog.csdn.net/2301_76809965/article/details/135476910
版权归原作者 yijianace 所有， 如有侵权，请联系我们删除。
版权归原作者 yijianace 所有， 如有侵权，请联系我们删除。