放慢旋转/交替文本的速度

Slow Down Spinning/Alternating Text

本文关键字：文本 速度 旋转      更新时间：2023-09-26

我正在尝试创建这样的旋转文本效果：http://www.massstudies.com/.但是，当用户将鼠标悬停在文本上方时，我希望旋转速度放慢。我现在已经停止了，我正在使用clearInterval。

我们非常感谢任何建议。谢谢：）

HTML:

<div id="main">
   <p id="text"></p>
   <button onclick="pauseRotation();">Stop</button>
</div>

脚本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
var words = ['Chocolate', 'Sugar','Cocoa Powder', 'Salt'];
    var index = 0;
    var nIntervId;
    function rotate() {
        document.getElementById('text').innerHTML =words[(index++)%(words.length)];
    }
    nIntervId=setInterval(rotate, 100);
    function pauseRotation(){
      clearInterval(nIntervId);
    }
</script>

这里有一种方法，可以在这个fiddle中进行测试：http://jsfiddle.net/6ybyM/2/

var words = ['Chocolate', 'Sugar',"Cocoa Powder", 'Salt'];
var index = 0;
(function rotate() {
  document.getElementById('text').innerHTML =words[(index++)%(words.length)];
  if($("#text").is(":hover")){
    setTimeout(rotate, 300);
  }
  else{
    setTimeout(rotate, 100);
  }
})()
相关文章：