下記のソースコードは、marqueeのいくつかの機能をボタンでコントロールさせたものです。
この中で、セレクトのoptionタグ内にある"リセット"は、"function marSpeed(opt){}"の中に
"location.reload();"を使っているために、ページ全体がリセットされてしまいます。
これを、marqueeとボタンだけをリセットさせるには、どのように書き換えたら言いのでしょうか。
ご教示ください。
<!DOCTYPE html>
<html>
<head>
<style>
[data-marquee]{ display: inline-block;
transform: translateX(-100%); }
.marquee_container { overflow-x: hidden; }
.DIRECTION {
color: white;
background: black;
}
.BLINK {
animation: blink 1s step-end infinite normal;
}
@keyframes blink {
0% { color: red; }
50% { color: transparent; }
}
</style>
</head>
<body>
<div id="myMarquee" class="marquee_container">
<span id="hello" data-marquee="left" data-marquee-sec="10">
Hello marquee!
</span>
</div>
<p>
<button id="blinkL" class="DIRECTION BLINK" type="button" onClick="hello.dataset.marquee='left'; marquee(hello); 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 marSpeed(opt){
var selectedIndex = opt.selectedIndex;
hello.dataset.marqueeSec='10';
marquee(hello);
document.getElementById('blinkL').disabled=false;
document.getElementById('blinkR').disabled=false;
if(selectedIndex==0){
hello.dataset.marqueeSec='5';
marquee(hello);
}
else if(selectedIndex==2){
hello.dataset.marqueeSec='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){
location.reload();
}
}
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 + "s linear 0s";
}
function scroll(px){
elm.addEventListener("transitionend", marquee, false);
to(px, Math.abs((px - current())/right * elm.dataset.marqueeSec));
}
var elm = elm_or_event.target || elm_or_event;
var right = elm.parentElement.getBoundingClientRect().width;
var left = -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>