update
This commit is contained in:
parent
383e63638a
commit
802892b78c
|
|
@ -1,37 +1,180 @@
|
|||
<div class="marquee-1" module="text_marquee" data-ps="">
|
||||
<ul class="marquee" data-level="0" data-list="texts">
|
||||
<li>{{content}}</li>
|
||||
</ul>
|
||||
<div class="marquee-1-controls">
|
||||
<ul class="controlplay" role="radiogroup" aria-label="播放控制選項">
|
||||
<a role="radio" aria-checked="true" href="javascript:;" class="resume-slide active" title="繼續播放" aria-label="繼續播放" aria-live="assertive">
|
||||
<i aria-hidden="true"></i>
|
||||
<p style="display: none;">繼續播放</p>
|
||||
</a>
|
||||
<a role="radio" aria-checked="false" href="javascript:;" class="pause-slide" title="暫停播放" aria-label="暫停播放" aria-live="assertive">
|
||||
<i aria-hidden="true"></i>
|
||||
<p style="display: none;">暫停播放</p>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="marquee" data-level="0" data-list="texts" aria-live="polite" aria-atomic="true">
|
||||
<li>{{content}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
(function(){
|
||||
var main_div = $("div[data-subpart-id={{subpart-id}}]"),
|
||||
total_texts = main_div.find("ul li").length - 1,
|
||||
current_text = 0,
|
||||
last_text = 0;
|
||||
(function(){
|
||||
var main_div = $("div[data-subpart-id={{subpart-id}}]");
|
||||
var total_texts = main_div.find("ul.marquee li").length - 1;
|
||||
var current_text = 0;
|
||||
var last_text = 0;
|
||||
var isPaused = false;
|
||||
var timer = null;
|
||||
|
||||
main_div.find("ul li").hide();
|
||||
var textTransform = function(){
|
||||
current_text++;
|
||||
current_text = (current_text > total_texts ? 0 : current_text);
|
||||
last_text = (current_text == 0 ? total_texts : current_text - 1);
|
||||
speed = $('.marquee > li > a').eq(current_text).attr('speed');
|
||||
main_div.find("ul li").eq(last_text).slideUp(500);
|
||||
main_div.find("ul li").eq(current_text).slideDown(500);
|
||||
if(total_texts > 0){
|
||||
setTimeout(textTransform,speed);
|
||||
}
|
||||
}
|
||||
setTimeout(textTransform,500);
|
||||
})();
|
||||
var $resumeBtn = main_div.find(".resume-slide");
|
||||
var $pauseBtn = main_div.find(".pause-slide");
|
||||
var $marquee = main_div.find("ul.marquee");
|
||||
|
||||
main_div.find("ul.marquee li").hide();
|
||||
|
||||
function textTransform() {
|
||||
if (isPaused) return;
|
||||
|
||||
current_text++;
|
||||
current_text = (current_text > total_texts ? 0 : current_text);
|
||||
last_text = (current_text === 0 ? total_texts : current_text - 1);
|
||||
|
||||
var speed = $(".marquee > li > a").eq(current_text).attr("speed") || 3000;
|
||||
|
||||
main_div.find("ul.marquee li").eq(last_text).slideUp(500);
|
||||
main_div.find("ul.marquee li").eq(current_text).slideDown(500);
|
||||
|
||||
if (total_texts > 0) {
|
||||
timer = setTimeout(textTransform, speed);
|
||||
}
|
||||
}
|
||||
|
||||
function pause() {
|
||||
isPaused = true;
|
||||
clearTimeout(timer);
|
||||
$pauseBtn.attr("aria-checked", "true").addClass("active");
|
||||
$resumeBtn.attr("aria-checked", "false").removeClass("active");
|
||||
// aria-live 暫停時設 off，避免螢幕報讀繼續讀
|
||||
$marquee.attr("aria-live", "off");
|
||||
}
|
||||
|
||||
function resume() {
|
||||
isPaused = false;
|
||||
$resumeBtn.attr("aria-checked", "true").addClass("active");
|
||||
$pauseBtn.attr("aria-checked", "false").removeClass("active");
|
||||
$marquee.attr("aria-live", "polite");
|
||||
var speed = $(".marquee > li > a").eq(current_text).attr("speed") || 3000;
|
||||
timer = setTimeout(textTransform, speed);
|
||||
}
|
||||
|
||||
// 播放/暫停按鈕
|
||||
$resumeBtn.on("click", function(e) {
|
||||
e.preventDefault();
|
||||
if (isPaused) resume();
|
||||
});
|
||||
|
||||
$pauseBtn.on("click", function(e) {
|
||||
e.preventDefault();
|
||||
if (!isPaused) pause();
|
||||
});
|
||||
|
||||
// 焦點進入跑馬燈區域時自動暫停
|
||||
main_div.on("focusin", function() {
|
||||
if (!isPaused) pause();
|
||||
});
|
||||
|
||||
// 焦點離開跑馬燈區域時自動恢復
|
||||
main_div.on("focusout", function(e) {
|
||||
setTimeout(function() {
|
||||
if (!main_div[0].contains(document.activeElement)) {
|
||||
if (isPaused) resume();
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
|
||||
// 初始狀態：播放中
|
||||
$resumeBtn.addClass("active").attr("aria-checked", "true");
|
||||
$pauseBtn.attr("aria-checked", "false");
|
||||
|
||||
timer = setTimeout(textTransform, 500);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function(){
|
||||
var main_div = $("div[data-subpart-id"{{subpart-id}})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.marquee-1-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.marquee-1 .controlplay {
|
||||
right: 0.5em;
|
||||
top: 0.6em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.marquee-1 .controlplay a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 1.5px solid #bbb;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.marquee-1 .controlplay a:hover,
|
||||
.marquee-1 .controlplay a:focus {
|
||||
background: #f0f0f0;
|
||||
outline: 2px solid #005fcc;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* resume icon：play 三角形 */
|
||||
.marquee-1 .controlplay .resume-slide i::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 4px 0 4px 8px;
|
||||
border-color: transparent transparent transparent #555;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* pause icon：兩條直線 */
|
||||
.marquee-1 .controlplay .pause-slide i {
|
||||
display: inline-flex;
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.marquee-1 .controlplay .pause-slide i::before,
|
||||
.marquee-1 .controlplay .pause-slide i::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 10px;
|
||||
background: #555;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* active 狀態顏色 */
|
||||
.marquee-1 .controlplay .resume-slide.active i::before {
|
||||
border-color: transparent transparent transparent #32D9C3;
|
||||
}
|
||||
|
||||
.marquee-1 .controlplay .pause-slide.active i::before,
|
||||
.marquee-1 .controlplay .pause-slide.active i::after {
|
||||
background: #ff4500;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue