Вход

Просмотр полной версии : Бегущая строка

LADYX
17.01.2018, 21:03
Помогите, пожалуйста, немного поправить скрипт бегущей строки. Когда страница загружается, то строка уже заполнена. А мне нужно, чтобы строка начинала бежать только после того, когда произойдет полная загрузка сайта. Можно так сделать? И еще один момент: как сделать паузу при наведении на строку? Спасибо большое!
var wrapper = document.querySelector('.currency_quotation'),
marquee = document.querySelector('#marquee'),
wrapperWidth = wrapper.offsetWidth,
marqueeWidth = marquee.scrollWidth;
function move() {
var currentTX = getComputedStyle(marquee).transform.split(',');
if( currentTX[4] === undefined ) {
currentTX = -1;
} else {
currentTX = parseFloat(currentTX[4]) - 1;
}

if(-currentTX >= marqueeWidth) {
marquee.style.transform = 'translateX(' + wrapperWidth + 'px)';

} else {
marquee.style.transform = 'translateX(' + currentTX + 'px)';
}
}
var interval = setInterval(move, 20);
<style>.currency_quotation {
width: 100%;
overflow: hidden;
position: relative;
}

#marquee {
white-space: nowrap;
}

#marquee p {
display: inline;
margin-right: 50px;
}</style>
<div class="currency_quotation">
<div id=marquee>
<p>Старт прошел в ночь на 8 января 2018 года с пускового комплекса SLC-40 на мысе Канаверал во Флориде..</p>
<p>Стратегическое командование США сообщило, что не зафиксировала новый военный спутник на заданной орбите. Некоторые СМИ уже предположили, что американский спутник-шпион упал в океан. В компании Илона Маска утверждали, что, по их данным, Falcon 9 отработал в штатном режиме. Позже в SpaceX начали расследование. Уже заявлено, что «к настоящему моменту нет признаков саботажа или другого вмешательства» в процесс запуска спутника.</p>
</div>
</div>
рони
18.01.2018, 03:07
LADYX,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.currency_quotation {
width: 100%;
overflow: hidden;
position: relative;
}

#marquee {
display: inline-block;
background-color: #FFD700;
white-space: nowrap;
transform: translateX(100%);
}

#marquee p {
display: inline;
margin-right: 50px;
}</style>
<script>
window.addEventListener("load", function() {
var wrapper = document.querySelector(".currency_quotation"),
marquee = document.querySelector("#marquee"),
wrapperWidth = wrapper.offsetWidth,
marqueeWidth = marquee.scrollWidth,
currentTX = wrapperWidth;
wrapper.addEventListener("mouseenter", function() {
wrapper.classList.remove("move");
});
wrapper.addEventListener("mouseleave", function() {
wrapper.classList.add("move");
});
window.addEventListener("resize", function() {
wrapperWidth = wrapper.offsetWidth;
marqueeWidth = marquee.scrollWidth;
currentTX = wrapperWidth;
})

function move() {
if (wrapper.classList.contains("move")) {
currentTX--;
}
if (-currentTX >= marqueeWidth) {
currentTX = wrapperWidth;
}
marquee.style.transform = "translateX(" + currentTX + "px)";
}
var interval = setInterval(move, 20);
});
</script>
</head>

<body>

<div class="currency_quotation move">
<div id=marquee>
<p>Старт прошел в ночь на 8 января 2018 года с пускового комплекса SLC-40 на мысе Канаверал во Флориде..</p>
<p>Стратегическое командование США сообщило, что не зафиксировала новый военный спутник на заданной орбите. Некоторые СМИ уже предположили, что американский спутник-шпион упал в океан. В компании Илона Маска утверждали, что, по их данным, Falcon 9 отработал в штатном режиме. Позже в SpaceX начали расследование. Уже заявлено, что «к настоящему моменту нет признаков саботажа или другого вмешательства» в процесс запуска спутника.</p>
</div>
</div>


</body>
</html>
LADYX
18.01.2018, 10:48
рони,
спасибо вам, да, всё супер!
LADYX
18.01.2018, 15:10
рони,
прошу прощения, один момент. Делаю паузу так:
document.querySelector('.marquee_pause').onclick = function() {
clearInterval(interval)
}
Работает. Но вот как мне сделать, чтобы при повторном нажатии бег возобновлялся. Помогите, пожалуйста, что я не так делаю?
Nexus
18.01.2018, 15:17
Но вот как мне сделать, чтобы при повторном нажатии бег возобновлялся
interval = setInterval(move, 20);
Dilettante_Pro
18.01.2018, 15:42
document.querySelector('.marquee_pause').onclick = function() {
if (interval) { clearInterval(interval); interval = 0;}
else interval = setInterval(move, 20);
}

А лучше
document.querySelector('.marquee_pause').onclick = function() {
wrapper.classList.toggle("move");
}
LADYX
18.01.2018, 16:20
Добавляю так:
window.addEventListener("load", function() {
var wrapper = document.querySelector(".currency_quotation"),
marquee = document.querySelector("#marquee"),
wrapperWidth = wrapper.offsetWidth,
marqueeWidth = marquee.scrollWidth,
currentTX = wrapperWidth;
wrapper.addEventListener("mouseenter", function() {
wrapper.classList.remove("move");
});
wrapper.addEventListener("mouseleave", function() {
wrapper.classList.add("move");
});
window.addEventListener("resize", function() {
wrapperWidth = wrapper.offsetWidth;
marqueeWidth = marquee.scrollWidth;
currentTX = wrapperWidth;
})

document.querySelector('.marquee_pause').onclick = function() {
wrapper.classList.toggle("move");
}

function move() {
if (wrapper.classList.contains("move")) {
currentTX--;
}
if (-currentTX >= marqueeWidth) {
currentTX = wrapperWidth;
}
marquee.style.transform = "translateX(" + currentTX + "px)";
}
var interval = setInterval(move, 20);
});
Не работает. Что я неправильно делаю?
И еще подскажите, пожалуйста, как добавить условие, что если на паузе, то классу .marquee_pause добавлять класс .marquee_pause_active ?
Простите за кучу вопросов.
LADYX
18.01.2018, 16:22
Dilettante_Pro,
кстати, а первый вариант работает
Dilettante_Pro
18.01.2018, 16:34
Не работает
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.currency_quotation {
width: 100%;
overflow: hidden;
position: relative;
}

#marquee {
display: inline-block;
background-color: #FFD700;
white-space: nowrap;
transform: translateX(100%);
}

#marquee p {
display: inline;
margin-right: 50px;
}</style>
<script>
window.addEventListener("load", function() {
var wrapper = document.querySelector(".currency_quotation"),
marquee = document.querySelector("#marquee"),
wrapperWidth = wrapper.offsetWidth,
marqueeWidth = marquee.scrollWidth,
currentTX = wrapperWidth;
wrapper.addEventListener("mouseenter", function() {
wrapper.classList.remove("move");
});
wrapper.addEventListener("mouseleave", function() {
wrapper.classList.add("move");
});
window.addEventListener("resize", function() {
wrapperWidth = wrapper.offsetWidth;
marqueeWidth = marquee.scrollWidth;
currentTX = wrapperWidth;
})
document.querySelector('.marquee_pause').onclick = function() {
wrapper.classList.toggle("move");
}
function move() {
if (wrapper.classList.contains("move")) {
currentTX--;
}
if (-currentTX >= marqueeWidth) {
currentTX = wrapperWidth;
}
marquee.style.transform = "translateX(" + currentTX + "px)";
}
var interval = setInterval(move, 20);
});
</script>
</head>

<body>

<div class="currency_quotation move">
<div id=marquee>
<p>Старт прошел в ночь на 8 января 2018 года с пускового комплекса SLC-40 на мысе Канаверал во Флориде..</p>
<p>Стратегическое командование США сообщило, что не зафиксировала новый военный спутник на заданной орбите. Некоторые СМИ уже предположили, что американский спутник-шпион упал в океан. В компании Илона Маска утверждали, что, по их данным, Falcon 9 отработал в штатном режиме. Позже в SpaceX начали расследование. Уже заявлено, что «к настоящему моменту нет признаков саботажа или другого вмешательства» в процесс запуска спутника.</p>
</div>
</div>
<button class="marquee_pause">Pause</button>

</body>
</html>
LADYX
18.01.2018, 16:43
Dilettante_Pro,
да, увидел ошибку.
А если первый ваш вариант добавляю:
document.querySelector('.marquee_pause').onclick = function() {
if (interval) { clearInterval(interval); interval = 0; this.toggleClass('marquee_pause_active'); }
else interval = setInterval(move, 20);
}
.marquee_pause_active {}
то также исправно работает. Но вот классу .marquee_pause класс .marquee_pause_active почему не добавляется, где снова моя ошибка?
Nexus
18.01.2018, 16:51
LADYX, так работает?
document.querySelector('.marquee_pause').onclick = function() {
interval=(this.classList.toggle('marquee_pause_act ive'),interval?(clearInterval(interval),0):setInte rval(move,20));
}
Dilettante_Pro
18.01.2018, 16:56
LADYX,
toggleClass() - это метод jQuery.

На чистом JS надо classList.toggle()

И в этом варианте его надо вынести из условия или использовать второй вариант, т.к. toggle сам проверяет условие
LADYX
18.01.2018, 17:38
Dilettante_Pro,
понял. Да, с чистым javascript-ом сложнее конечно)
Nexus,
LADYX, так работает?
document.querySelector('.marquee_pause').onclick = function() {
    interval=(this.classList.toggle('marquee_p ause_active'),interval?(clearInterval(interval),0) :setInterval(move,20));
}

да, так работает.
В итоге получается вот так:
window.addEventListener("load", function() {
var wrapper = document.querySelector(".currency_quotation"),
marquee = document.querySelector("#marquee"),
wrapperWidth = wrapper.offsetWidth,
marqueeWidth = marquee.scrollWidth,
currentTX = wrapperWidth;
wrapper.addEventListener("mouseenter", function() {
wrapper.classList.remove("move");
});
wrapper.addEventListener("mouseleave", function() {
wrapper.classList.add("move");
});
window.addEventListener("resize", function() {
wrapperWidth = wrapper.offsetWidth;
marqueeWidth = marquee.scrollWidth;
currentTX = wrapperWidth;
})

document.querySelector('.marquee_pause').onclick = function() {
interval=(this.classList.toggle('marquee_pause_act ive'),interval?(clearInterval(interval),0):setInte rval(move,20));
}

function move() {
if (wrapper.classList.contains("move")) {
currentTX--;
}
if (-currentTX >= marqueeWidth) {
currentTX = wrapperWidth;
}
marquee.style.transform = "translateX(" + currentTX + "px)";
}
var interval = setInterval(move, 20);
});

Спасибо!
Dilettante_Pro
18.01.2018, 18:13
LADYX,
А если так?
document.querySelector('.marquee_pause').onclick = function() {
wrapper.classList.toggle("move");
this.classList.toggle('marquee_pause_active');
}
LADYX
18.01.2018, 18:18
Dilettante_Pro,
LADYX,
А если так?
1
document.querySelector('.marquee_pause').onclick = function() {
2
     wrapper.classList.toggle("move");
3
     this.classList.toggle('marquee_pause_act ive');
4
 }

а так класс присваивается, но пауза не работает
Dilettante_Pro
18.01.2018, 18:32
Как это не работает?

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.currency_quotation {
width: 100%;
overflow: hidden;
position: relative;
}

#marquee {
display: inline-block;
background-color: #FFD700;
white-space: nowrap;
transform: translateX(100%);
}

#marquee p {
display: inline;
margin-right: 50px;
}
.marquee_pause_active { background-color:red;}
</style>
<script>
window.addEventListener("load", function() {
var wrapper = document.querySelector(".currency_quotation"),
marquee = document.querySelector("#marquee"),
wrapperWidth = wrapper.offsetWidth,
marqueeWidth = marquee.scrollWidth,
currentTX = wrapperWidth;
wrapper.addEventListener("mouseenter", function() {
wrapper.classList.remove("move");
});
wrapper.addEventListener("mouseleave", function() {
wrapper.classList.add("move");
});
window.addEventListener("resize", function() {
wrapperWidth = wrapper.offsetWidth;
marqueeWidth = marquee.scrollWidth;
currentTX = wrapperWidth;
})
document.querySelector('.marquee_pause').onclick = function() {
wrapper.classList.toggle("move");
this.classList.toggle('marquee_pause_active');
}
function move() {
if (wrapper.classList.contains("move")) {
currentTX--;
}
if (-currentTX >= marqueeWidth) {
currentTX = wrapperWidth;
}
marquee.style.transform = "translateX(" + currentTX + "px)";
}
var interval = setInterval(move, 20);
});
</script>
</head>

<body>

<div class="currency_quotation move">
<div id=marquee>
<p>Старт прошел в ночь на 8 января 2018 года с пускового комплекса SLC-40 на мысе Канаверал во Флориде..</p>
<p>Стратегическое командование США сообщило, что не зафиксировала новый военный спутник на заданной орбите. Некоторые СМИ уже предположили, что американский спутник-шпион упал в океан. В компании Илона Маска утверждали, что, по их данным, Falcon 9 отработал в штатном режиме. Позже в SpaceX начали расследование. Уже заявлено, что «к настоящему моменту нет признаков саботажа или другого вмешательства» в процесс запуска спутника.</p>
</div>
</div>
<button class="marquee_pause">Pause</button>
</body>
</html>
LADYX
18.01.2018, 19:04
Как это не работает?
Dilettante_Pro,
странно конечно. Здесь работает. У себя заменяю, перестает работать пауза. А класс, как и говорил, добавляется.