The source code below should be used to control some functions of marquee with a button.
Replaced by CSS and Javascript.The description adjusts the snake's left and right movements and movement speed
It's simple enough to make you do it.This includes
moving your tongue up and down and
"If you add a ""flutter your tail (*here, note symbol) up and down"" movement, how do you
<!DOCTYPE html>
<html>
<head>
<style>
.option {color:red;}
[data-marquee] {display:inline-block;
transform:translateX(-100%);}
.marquee_container {overflow-x:hidden;}
.DIRECTION {
color:white;
background:black;
}
BLINK {
animation —blink1s step-end infinite normal;
}
@keyframesblink{
0% {color:red;}
50% {color:transparent;}
}
</style>
</head>
<body>
<divid="myMarquee" class="marquee_container">
<divid="hello" data-marquee="left" data-marquee-sec="10">
<span id="tongue" class="option" style="font-size:10px">~</span>>°~~~~<span id="note" class="option">♪</span>
</div>
</div>
<p>
<button id="blinkL" class="DIRECTION BLINK" type="button" onClick="hello.dataset.marquee='left';marLeft();">
←
</button>
☆
<select id='marSpeed' name="speedSelector" onchange='marSpeed(this)'>
<option value='Faster'> Faster</option>
<option value='Normal Speed' selected> (Normal)</option>
<option value='Slower'> Slower</option>
<option value='Stop'>-STOP-</option>
<option value='Reset'> RESET</option>
</select>
☆
<button id="blinkR" class="DIRECTION" type="button" onClick="hello.dataset.marquee='right';marquee(hello);marRight();">
→
</button>
</p>
<script type="text/javascript">
function marLeft(){
document.getElementById("blinkL").classList.add("BLINK");
document.getElementById("blinkR").classList.remove("BLINK");
}
function marRight(){
document.getElementById("blinkR").classList.add("BLINK");
document.getElementById("blinkL").classList.remove("BLINK");
}
function setDefaultSetting(){
// spend 10 seconds to the left for a week
hello.dataset.marquee='left';
hello.dataset.marqueSec='10';
// button illumination
marLeft();
// Leave (Normal) selected
document.getElementById('marSpeed').options[1].selected=true;
// put back in place
hello.style.transform="translateX(-100%)";
hello.style.transition="transform0s linear0s";
}
function marSpeed(opt){
var selectedIndex=opt.selectedIndex;
hello.dataset.marqueSec='10';
marquee (hello);
document.getElementById('blinkL').disabled=false;
document.getElementById('blinkR').disabled=false;
if(selectedIndex==0){
hello.dataset.marqueSec='5';
marquee (hello);
}
else if (selectedIndex==2){
hello.dataset.marqueSec='20';
marquee (hello);
}
else if (selectedIndex==3){
document.getElementById('blinkL').disabled=true;
document.getElementById('blinkR').disabled=true;
document.getElementById('blinkL').classList.remove("BLINK");
document.getElementById('blinkR').classList.remove("BLINK");
hello.dataset.marquee='stop';
marquee (hello);
}
else if (selectedIndex==4){
setDefaultSetting();
marquee (hello);
}
}
function marquee(elm_or_event){
"use strict";
function current() {
return getComputedStyle(elm).transform.split(",")[4]||0;
}
function to(px,sec){
elm.style.transform="translateX("+px+"px);
elm.style.transition="transform" + sec + "slinear0s";
}
function scroll(px){
elm.addEventListener("transitionend", marquee, false);
to(px, Math.abs((px-current())/right*elm.dataset.marqueSec);
}
varelm=elm_or_event.target||elm_or_event;
variable right=elm.parentElement.getBoundingClientRect().width;
varleft=-elm.getBoundingClientRect().width;
elm.removeEventListener("transitionend", marquee, false);
to (current(), 0);
if(elm.dataset.marquee=="stop"){
return;
}
if(current()+1>=right){
to (left, 0);
}
else if(current()-1<=left){
to (right, 0);
}
scroll(elm.dataset.marquee=="left") ?left:right);
}
marquee (hello);
</script>
</body>
</html>
"I think there is a problem in general and professionally, but I was able to move up and down with animation instead of nesting."
<!DOCTYPE html>
<html>
<head>
<style>
.option {color:red;}
@keyframes option {
0% {transform:translateY(-5px);}
100% {transform:translateY(0px);}
}
#tongue{
animation —option 0.5sease-in-out infinite alternate;
}
#note{
animation —option 0.5sease-in-out infinite alternate;
}
[data-marquee] {display:inline-block;
}
.marquee_container {overflow-x:hidden;}
.DIRECTION {
color:white;
background:black;
}
BLINK {
animation —blink1s step-end infinite normal;
}
@keyframesblink{
0% {color:red;}
50% {color:transparent;}
}
</style>
</head>
<body>
<divid="myMarquee" class="marquee_container">
<divid="hello" data-marquee="left" data-marquee-sec="10">
<span id="tongue" class="option" style="font-size:10px;">~</span>>°~~~~<span id="note" class="option" style="font-size:15px;">♪</span>
</div>
</div>
<p>
<button id="blinkL" class="DIRECTION BLINK" type="button" onClick="hello.dataset.marquee='left';marLeft();">
←
</button>
☆
☆
<button id="blinkR" class="DIRECTION" type="button" onClick="hello.dataset.marquee='right';marquee(hello);marRight();">
→
</button>
</p>
<script type="text/javascript">
function marLeft(){
document.getElementById("blinkL").classList.add("BLINK");
document.getElementById("blinkR").classList.remove("BLINK");
}
function marRight(){
document.getElementById("blinkR").classList.add("BLINK");
document.getElementById("blinkL").classList.remove("BLINK");
}
function marquee(elm_or_event){
"use strict";
function current() {
return getComputedStyle(elm).transform.split(",")[4]||0;
}
function to(px,sec){
elm.style.transform="translateX("+px+"px);
elm.style.transition="transform" + sec + "slinear0s";
}
function scroll(px){
elm.addEventListener("transitionend", marquee, false);
to(px, Math.abs((px-current())/right*elm.dataset.marqueSec);
}
varelm=elm_or_event.target||elm_or_event;
variable right=elm.parentElement.getBoundingClientRect().width;
varleft=-elm.getBoundingClientRect().width;
elm.removeEventListener("transitionend", marquee, false);
to (current(), 0);
if(current()+1>=right){
to (left, 0);
}
else if(current()-1<=left){
to (right, 0);
}
scroll(elm.dataset.marquee=="left") ?left:right);
}
marquee (hello);
</script>
</body>
</html>
© 2024 OneMinuteCode. All rights reserved.