79 lines
1.8 KiB
Plaintext
79 lines
1.8 KiB
Plaintext
<div class="widget-link widget1 widget10">
|
||
<div class="widget-inner">
|
||
<h3 class="widget-title">
|
||
<span>{{widget-title}}</span>
|
||
</h3>
|
||
<ul class="list-unstyled" data-level="0" data-list="web_link">
|
||
<li class="widget-content">
|
||
<div class="link-img-wrap{{display_image}}">
|
||
<a href="{{link_to_show}}" target="{{target}}" title="{{img_description}}">
|
||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
.widget10 .list-unstyled {
|
||
height: 300px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
padding: 1em;
|
||
margin: 0;
|
||
}
|
||
|
||
.widget10 .list-unstyled > .marquee-inner {
|
||
position: relative;
|
||
}
|
||
|
||
.widget10 .widget-content {
|
||
list-style: none;
|
||
}
|
||
|
||
</style>
|
||
<script>
|
||
|
||
$(function () {
|
||
$('.widget10 .list-unstyled').each(function () {
|
||
const $viewport = $(this);
|
||
let speed = 50;
|
||
let pause = false;
|
||
|
||
const $items = $viewport.find('.widget-content');
|
||
if ($items.length <= 1) return;
|
||
|
||
// 包一層 inner（不破壞原 HTML）
|
||
$items.wrapAll('<div class="marquee-inner"></div>');
|
||
const $inner = $viewport.find('.marquee-inner');
|
||
|
||
// 複製內容以達成無限循環
|
||
$inner.append($items.clone());
|
||
|
||
let itemHeight = $items.first().outerHeight(true);
|
||
let currentTop = 0;
|
||
|
||
function marquee() {
|
||
if (pause) return;
|
||
|
||
currentTop--;
|
||
|
||
if (Math.abs(currentTop) >= itemHeight) {
|
||
currentTop = 0;
|
||
$inner.append($inner.children().first());
|
||
}
|
||
|
||
$inner.css('transform', 'translateY(' + currentTop + 'px)');
|
||
}
|
||
|
||
let timer = setInterval(marquee, speed);
|
||
|
||
// hover 暫停 / 繼續
|
||
$viewport
|
||
.on('mouseenter', () => pause = true)
|
||
.on('mouseleave', () => pause = false);
|
||
});
|
||
});
|
||
|
||
|
||
</script> |