原生js的图片文字小枠のランニングランプ効果と弾幕効果
61487 ワード
筆者は最近のポイントアッププロジェクトで原生jsを使用してランニングランプ効果に遭遇し、画像の循環再生が必要であり、画像の多少に応じて一定のスタイルを変えることができ、ランニングランプ効果を実現することができる.そこで画像の、文字の、もう一つの小さな枠を統合し、ついでに小さな枠に基づくランニングランプが弾幕のような効果を追加し、次は直接コード(原生js)をつけた.
一.画像ランタン
いくつかのスタイルはその効果に影響を与える可能性があります.スタイルを微調整するだけでよい.
二.文字走馬灯
三.小枠走馬灯
四.弾幕効果
以上はいくつかの走馬灯の効果で、もし効果がよくないかあるいはコードが間違っているならば、各位の殿さまは多く許してください.ご来館ありがとうございました.
このうち、小枠のランニングランプは以下のとおりです.https://blog.csdn.net/lzpzwy/article/details/80072762
一.画像ランタン
<!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