<div id='marqueetopbox' >
<div id='marqueetop'  class="marqueestyle<{$marqueestyle}>">  <div class="marquee" >
<{if $marqueetext}>
<{foreach item=marquee from=$marqueetext}>                        
<span id='marqueebox'><a title="<{$marquee.title}>" target="<{$marquee.target}>" href="<{$marquee.url}>" >[<{$marquee.time}>]-<{$marquee.title|truncate:46:"":true}></a></span>
<{/foreach}>
<{/if}>	
</div>
<{if $xoops_isadmin}>
<a href='<{xoAppUrl}>modules/neothemesadmin/admin/marqueetable.php'  class='btn btn-md btn-primary marqueeadmin'><{$smarty.const._MA_MARQUEETABLEPHP01}></a>  
<{/if}>
</div>   
</div>

<script type="text/javascript">
$(document).ready(function() {
  // 初始化跑馬燈
  $('#marqueetop .marquee').marquee({
    duration: <{if $marqueesdirection eq 'left'}>eval(<{$alsspeed}>00 + 25000)<{else}><{$alsspeed}>00<{/if}>,
    gap: 0,
    delayBeforeStart: 0,
    direction: '<{$marqueesdirection}>',
    pauseOnHover: true,
    duplicated: true
  });

  // 設定當元素獲取焦點時暫停跑馬燈
$('#marqueetop .marquee').on('focusin', function() {
  $(this).marquee('pause'); // 暫停跑馬燈
  const wrapper = $('#marqueetop .js-marquee-wrapper'); // 取得跑馬燈的包裹層
  
  // 停止動畫並重置位置
  wrapper.css({
    'animation': 'none',          // 停止動畫
    'transform': 'translateX(0)'  // 重置位置
  });
  
  // 強制刷新樣式，讓瀏覽器應用剛才的變更
  void wrapper[0].offsetWidth;
  
  // 重啟動畫，讓跑馬燈從頭開始
  wrapper.css({
    'animation': '' // 恢復原始動畫
  });
});

  // 當元素失去焦點時恢復跑馬燈
  $('#marqueetop .marquee').on('focusout', function() {
    $(this).marquee('resume');
  });

});
</script>
