原生js的图片.文字.小框的跑马灯效果及弹幕效果
笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果。于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增加了一个类似弹幕效果,下面直接上代码(原生js)。
一.图片跑马灯
<!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>
一些样式可能会影响其效果.只需将样式微调即可.
二.文字跑马灯
<!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>
三.小框跑马灯
<!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>
四.弹幕效果
<!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>
以上便是几种跑马灯效果,如有效果不佳或者代码错误,请各位老爷多多包涵.感谢各位的光临.
其中小框的跑马灯转自于:https://blog.csdn.net/lzpzwy/article/details/80072762