笔者在最近的一个点上项目中使用原生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) 页面控制台查看是stringvar 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、获取到要移动的元素IDmoves = document.getElementById("move");//3、设置元素的起始位置像素moves.style.right = '-400px';//4、调用移动方法moveItRight();}//定义方法function moveItRight() {//判断元素起始位置是否大于屏幕宽度if (parseInt(moves.style.right) > (screen.width))//将其赋值为0moves.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>
以上便是几种跑马灯效果,如有效果不佳或者代码错误,请各位老爷多多包涵.感谢各位的光临.
其中小框的跑马灯转自于:/lzpzwy/article/details/80072762
如果觉得《原生js的图片.文字.小框的跑马灯效果及弹幕效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
