微件

ScrollText：修订间差异

来自卡厄思梦境WIKI

←上一编辑下一编辑→
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,067次编辑
小无编辑摘要
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,067次编辑
无编辑摘要
第4行： 第4行：
   overflow: hidden;
   overflow: hidden;
   display: flex;
   display: flex;
   align-items: center;
   align-items: flex-start;
  justify-content: center;
}
}


第13行： 第12行：
   position: relative;
   position: relative;
   width: 100%;
   width: 100%;
  text-align: center;
}
.scroll-text.has-scroll {
  align-items: flex-start;
}
.scroll-text.has-scroll .scroll-text-content {
   text-align: center;
   text-align: center;
}
.scroll-text .scroll-text-content.enable-scroll {
   animation: scrollText linear infinite;
   animation: scrollText linear infinite;
}
}


.scroll-text .scroll-text-content.enable-scroll:hover {
.scroll-text .scroll-text-content:hover {
   animation-play-state: paused;
   animation-play-state: paused;
}
@keyframes scrollText-default {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + 110px));
  }
}
}
</style>
</style>
第45行： 第24行：
(function() {
(function() {
   function initScroll() {
   function initScroll() {
    // 使用 class 选择器获取所有滚动文本容器
     var wrappers = document.querySelectorAll('.scroll-text');
     var wrappers = document.querySelectorAll('.scroll-text');
      
      
第53行： 第31行：
     }
     }
      
      
    // 遍历每个容器并初始化
     wrappers.forEach(function(wrapper, index) {
     wrappers.forEach(function(wrapper, index) {
       var content = wrapper.querySelector('.scroll-text-content');
       var content = wrapper.querySelector('.scroll-text-content');
       if (!content || content.classList.contains('scroll-initialized')) {
       if (!content) {
         return;
         return;
       }
       }
        
        
      // 标记已初始化，避免重复处理
      content.classList.add('scroll-initialized');
     
      var text = content.textContent || content.innerText;
      var charCount = text.replace(/\s+/g, '').length;
      var threshold = parseInt(content.getAttribute('data-threshold')) || 20;
       var speed = parseFloat(content.getAttribute('data-speed')) || 10;
       var speed = parseFloat(content.getAttribute('data-speed')) || 10;
      var animationName = 'scrollText-' + index + '-' + Date.now();
        
        
       if (charCount > threshold) {
       setTimeout(function() {
         // 为父容器添加标识类，表示需要滚动
         var contentHeight = content.scrollHeight;
         wrapper.classList.add('has-scroll');
         var wrapperHeight = wrapper.offsetHeight;
        var scrollDistance = contentHeight - wrapperHeight;
          
          
        // 为每个实例创建唯一的动画名称
         var styleId = 'scroll-text-animation-' + index;
         var animationName = 'scrollText-' + index + '-' + Date.now();
        var existingStyle = document.getElementById(styleId);
         content.classList.add('enable-scroll');
         if (existingStyle) {
          existingStyle.remove();
        }
          
          
         // 等待DOM更新后计算实际高度
         var style = document.createElement('style');
        setTimeout(function() {
        style.id = styleId;
          var contentHeight = content.scrollHeight;
        style.textContent = `
          var wrapperHeight = wrapper.offsetHeight;
           @keyframes ${animationName} {
          var scrollDistance = contentHeight - wrapperHeight;
            0% {
            
              transform: translateY(0);  
          // 动态设置滚动距离
             }
          if (scrollDistance > 0) {
             100% {  
            // 为当前实例创建独立的动画样式
               transform: translateY(-${scrollDistance}px);  
            var styleId = 'scroll-text-animation-' + index;
             var existingStyle = document.getElementById(styleId);
             if (existingStyle) {
               existingStyle.remove();
             }
             }
           
            var style = document.createElement('style');
            style.id = styleId;
            style.textContent = `
              @keyframes ${animationName} {
                0% {
                  transform: translateY(0);
                }
                100% {
                  transform: translateY(-${scrollDistance}px);
                }
              }
            `;
            document.head.appendChild(style);
           
            // 计算动画时长并应用动画
            var duration = Math.max(speed, charCount / 8);
            content.style.animationName = animationName;
            content.style.animationDuration = duration + 's';
          } else {
            // 如果实际上不需要滚动，移除滚动类
            wrapper.classList.remove('has-scroll');
            content.classList.remove('enable-scroll');
           }
           }
         }, 10);
         `;
      } else {
        document.head.appendChild(style);
         // 字符数未达到阈值，确保没有滚动类
       
         wrapper.classList.remove('has-scroll');
        var text = content.textContent || content.innerText;
       }
         var charCount = text.replace(/\s+/g, '').length;
        var duration = Math.max(speed, charCount / 8);
        content.style.animationName = animationName;
         content.style.animationDuration = duration + 's';
       }, 10);
     });
     });
   }
   }

2025年10月16日 (四) 22:14的版本

<style> .scroll-text { 

 position: relative;
 overflow: hidden;
 display: flex;
 align-items: flex-start;

}

.scroll-text .scroll-text-content { 

 word-wrap: break-word;
 word-break: break-all;
 position: relative;
 width: 100%;
 text-align: center;
 animation: scrollText linear infinite;

}

.scroll-text .scroll-text-content:hover { 

 animation-play-state: paused;

} </style>

<script> (function() { 

 function initScroll() {
   var wrappers = document.querySelectorAll('.scroll-text');
   
   if (!wrappers.length) {
     setTimeout(initScroll, 100);
     return;
   }
   
   wrappers.forEach(function(wrapper, index) {
     var content = wrapper.querySelector('.scroll-text-content');
     if (!content) {
       return;
     }
     
     var speed = parseFloat(content.getAttribute('data-speed')) || 10;
     var animationName = 'scrollText-' + index + '-' + Date.now();
     
     setTimeout(function() {
       var contentHeight = content.scrollHeight;
       var wrapperHeight = wrapper.offsetHeight;
       var scrollDistance = contentHeight - wrapperHeight;
       
       var styleId = 'scroll-text-animation-' + index;
       var existingStyle = document.getElementById(styleId);
       if (existingStyle) {
         existingStyle.remove();
       }
       
       var style = document.createElement('style');
       style.id = styleId;
       style.textContent = `
         @keyframes ${animationName} {
           0% { 
             transform: translateY(0); 
           }
           100% { 
             transform: translateY(-${scrollDistance}px); 
           }
         }
       `;
       document.head.appendChild(style);
       
       var text = content.textContent || content.innerText;
       var charCount = text.replace(/\s+/g, ).length;
       var duration = Math.max(speed, charCount / 8);
       content.style.animationName = animationName;
       content.style.animationDuration = duration + 's';
     }, 10);
   });
 }
 
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initScroll);
 } else {
   initScroll();
 }

})(); </script>

检索自“http://cznwiki.com/index.php?title=微件:ScrollText&oldid=2371”