The author encountered a marquee effect using native js in a recent project, and the picture needs to be played in a loop, and a certain style can be changed according to the number of pictures to achieve the marquee effect. So the picture, text and another small box are all integrated. By the way, the marquee based on the small box adds a similar barrage effect, and the code (native js) is directly added below.
1. Picture Marquee
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
min-height: 250px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
ul {
position: absolute;
}
li {
list-style: none;
float: left;
width: 350px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="box">
<ul class="goods">
<li>
<a href="javascript:">
<img src="./goods19.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="./goods18.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="./goods17.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="./goods16.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="./goods15.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="./goods14.jpg" alt="">
</a>
</li>
</ul>
</div>
<script>
let box = document.querySelector('.box');
let ulObj = document.querySelector('.goods');
let liArr = ulObj.children;
let newUl = ulObj.cloneNode(true);
box.appendChild(newUl); //添加克隆元素
let wid = (liArr[0].offsetWidth + 10) * liArr.length + 'px'; //获取ul宽度
newUl.style.left = wid; //克隆的ul的位置
//console.log(newUl.style.left);
var timer = setInterval(sta, 30); //设置定时器 一开始就动起来
function sta() {
var ulLeft = ulObj.offsetLeft; //ul到父元素左边的距离
var newLeft = newUl.offsetLeft; //新的ul到父元素左边的距离
ulObj.style.left = ulLeft - 5 + 'px';
newUl.style.left = newLeft - 5 + 'px'; //两个ul一起向左运动
if (parseInt(ulObj.style.left) < -parseInt(wid)) ulObj.style.left = wid;
if (parseInt(newUl.style.left) < -parseInt(wid)) newUl.style.left = wid; //当每个ul完全到左边外面后回到屏幕的最右边
}
//给盒子绑定移入停止,移出继续移动`
box.addEventListener('mouseenter', () => {
clearInterval(timer)
});
box.addEventListener('mouseleave', () => {
timer = setInterval(sta, 30);
});
</script>
</body>
</html>
Some styles may affect its effect. Just fine-tune the style.
2. Text Marquee
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.txt {
color: white;
background: red;
text-align: center;
font-size: 50px;
}
</style>
</head>
<body>
<div class="txt">欢迎来到我的博客！欢迎来到我的博客！</div>
<script>
setInterval(function () //通过定时器重复动作
{
var oTxt = document.querySelector('.txt'); //获取标签
var txt = oTxt.innerText; //获取标签文本内容
// console.log(typeof txt) 页面控制台查看是string
var first_i = txt[0]; //字符串索引取值
var last_i = txt.slice(1, txt.length); //字符串切片
var new_txt = last_i + first_i; //字符串拼接
oTxt.innerText = new_txt; //拼接后的字符串放到标签文本内容
}, 500)
</script>
</body>
</html>
3. Small frame marquee
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#move {
position: absolute;
width: 500px;
height: 50px;
top: 200px;
font-size: 50px;
}
</style>
</head>
<body>
<div id="move"> 面朝大海 春暖花开 </div>
</body>
<script>
//1、定义加载事件
window.onload = function () {
//2、获取到要移动的元素ID
moves = document.getElementById("move");
//3、设置元素的起始位置像素
moves.style.right = '-400px';
//4、调用移动方法
moveItRight();
}
//定义方法
function moveItRight() {
//判断元素起始位置是否大于屏幕宽度
if (parseInt(moves.style.right) > (screen.width))
//将其赋值为0
moves.style.right = 0;
//每调用一次加3个像素
moves.style.right = parseInt(moves.style.right) + 5 + 'px';
setTimeout("moveItRight()", 50); // 在指定的毫秒数后调用函数
}
</script>
</html>
Four. Barrage effect
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-family: "微软雅黑";
font-size: 62.5%;
}
.boxDom {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.idDom {
width: 100%;
height: 100px;
background: #666;
position: fixed;
bottom: 0px;
}
.content {
display: inline-block;
width: 430px;
height: 40px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
.title {
display: inline;
font-size: 4em;
vertical-align: bottom;
color: #fff;
}
.text {
border: none;
width: 300px;
height: 30px;
border-radius: 5px;
font-size: 2.4em;
}
.btn {
width: 60px;
height: 30px;
background: #f90000;
border: none;
color: #fff;
font-size: 2.4em;
}
span {
position: absolute;
overflow: hidden;
color: #000;
font-size: 4em;
line-height: 1.5em;
cursor: pointer;
white-space: nowrap;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="boxDom" id="boxDom">
<div class="idDom" id="idDom">
<div class="content">
<p class="title">吐槽:</p>
<input type="text" class="text" id="text" value="" />
<button type="button" class="btn" id="btn">发射</button>
</div>
</div>
</div>
<script>
class Danmu {
constructor() {
this.boxDom = document.getElementById('boxDom')
this.idDom = document.getElementById('idDom')
this.txtObj = document.getElementById('text')
this.btnObj = document.getElementById('btn')
this.startMove();
}
startMove() {
this.btnObj.onclick = () => {
//点击发射按钮发送弹幕
this.Txt();
this.txtMove(this.spanObj, {
left: 0
}, () => {
remove()
});
}
this.txtObj.onkeydown = () => {
//在输入框中按下回车键发送弹幕
if (event.keyCode == '13') {
this.Txt();
this.txtMove(this.spanObj, {
left: 0
}, () => {
remove()
});
}
}
}
// 产生文字
Txt() {
// 创建放文字的span给与样式并追加到上方盒子中
this.spanObj = document.createElement('span');
this.spanObj.innerHTML = this.txtObj.value;
this.spanObj.style.color = this.randC();
this.boxDom.appendChild(this.spanObj);
this.spanObj.display = 'inline-block';
// 设置span定位的位置(在上方盒子中随机高度)
let spanL = this.boxDom.clientWidth - this.spanObj.offsetWidth;
let spanT = this.rand(0, this.idDom.offsetTop - this.spanObj.offsetHeight)
this.spanObj.style.top = spanT + 'px';
this.spanObj.style.left = spanL + 'px';
}
// 运动函数.可参考之前的 博文 运动函数的封装
txtMove(eleObj, obj, cb) {
var timer;
var onOff = false;
clearInterval(timer);
this.timer = setInterval(() => {
for (var attr in obj) {
var pos = parseInt(this.getPos(eleObj, attr));
var speed = -10;
if (pos + speed == obj[attr]) {
clearInterval(timer);
onOff = true;
}
eleObj.style[attr] = pos + speed + 'px';
}
if (onOff) {
clearInterval(timer);
if (cb) cb()
}
}, 100)
}
//获取非行内样式
getPos(ele, attr) {
if (ele.currentStyle) {
return ele.currentStyle[attr]
} else {
return getComputedStyle(ele)[attr]
}
}
// 随机颜色
randC() {
let n1 = this.rand(0, 255)
let n2 = this.rand(0, 255)
let n3 = this.rand(0, 255)
return 'RGB(' + n1 + ',' + n2 + ',' + n3 + ')'
}
//随机数
rand(min, max) {
return Math.round(Math.random() * (max - min) + min)
}
}
new Danmu;
</script>
</body>
</html>
The above are several marquee effects. If the effect is not good or the code is wrong, please forgive me. Thank you for coming.
The marquee of the small box is transferred from: https://blog.csdn.net/lzpzwy/article/details/80072762