2015-09-19 74 views
1

你好傢伙它一直在竊聽我整夜。我一直在試圖讓一個字旋轉功能,在速度降低,然後最終停止。把它想象成一個字的輪盤賭。所以我將這些單詞存儲在一個數組中,並查看單詞並顯示它們。現在,我需要減速並慢慢停下來,隨便說一句,我該怎麼辦?JavaScript文本旋轉

<?php 



    $json=file_get_contents('http://ddragon.leagueoflegends.com/cdn/5.18.1/data/en_US/champion.json'); 
$champions = json_decode($json); 
?> 

<?php 

$championsArray = array(); 
foreach($champions->data as $champion){ 
    $championsArray[] = $champion->id; 
} 
shuffle($championsArray); 
$speed = 1000; 
$count = count($championsArray); 
var_dump($championsArray); 
?> 
<!DOCTYPE html> 
<html lang="en" class="demo1 no-js"> 
    <head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>jQuery Super Simple Text Rotator Demo 1: Default Settings</title> 
    <meta name="description" content="Rotating text is a very simple idea where you can add more content to a text area without consuming much space by rotating an individual word with a collection of others" /> 
    <meta name="keywords" content="jquery text rotator, css text rotator, rotate text, inline text rotator" /> 
    <meta name="author" content="Author for Onextrapixel" /> 
    <link rel="shortcut icon" href="../file/favicon.gif"> 
    <link rel="stylesheet" type="text/css" href="css/default.css" /> 

    <!-- Edit Below --> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <link rel="stylesheet" href="jquery.wordrotator.css"> 
     <script src="jquery.wordrotator.js"></script> 

    </head> 
    <body class="demo1"> 
    <div class="container"> 

<p><span id="myWords"></span></p> 

     <div class="main"> 

     <a href="#" onclick="erm()">Go!</a> 
     </div> 
    </div><!-- Container --> 

<script type="text/javascript"> 


function eventFire(el, etype){ 
    if (el.fireEvent) { 
    el.fireEvent('on' + etype); 
    } else { 
    var evObj = document.createEvent('Events'); 
    evObj.initEvent(etype, true, false); 
    el.dispatchEvent(evObj); 
    } 
} 


    function erm() { 
    var cont = $("#myWords"); 

    $(function() { 
     $("#myWords").wordsrotator({ 
      randomize: true, 
      stopOnHover: true,  //stop animation on hover 
      words: ['Heimerdinger','Ezreal','Skarner','Nunu','Kennen','Lulu','Morgana','Sejuani','Draven','Nocturne','KogMaw','Jinx','Khazix','Cassiopeia','Fiora','Maokai','Zac','Quinn','Vladimir','RekSai','LeeSin','TwistedFate','MissFortune','Shaco','Vayne','Sivir','Urgot','Nautilus','Annie','Fizz','Janna','Irelia','Karthus','Trundle','Jax','Graves','Leona','Rengar','Amumu','Malzahar','TahmKench','MasterYi','Twitch','Rumble','Nidalee','Shyvana','Veigar','Singed','Riven','Leblanc','Katarina','Azir','Viktor','Poppy','Ahri','Yorick','Aatrox','Brand','Tryndamere','DrMundo','Hecarim','Braum','Nasus','Pantheon','Elise','Velkoz','Swain','Darius','Kayle','Thresh','Nami','Ekko','Alistar','Galio','Warwick','Orianna','Sona','Lux','Ryze','Jayce','Kassadin','Volibear','Blitzcrank','Gangplank','Karma','XinZhao','Ziggs','Malphite','Tristana','Soraka','Anivia','Xerath','Renekton','Shen','Lissandra','Ashe','Mordekaiser','Talon','Zilean','JarvanIV','Rammus','Yasuo','Vi','Bard','Sion','Udyr','MonkeyKing','Akali','Diana','Varus','Kalista','Evelynn','Teemo','Gnar','Garen','Taric','FiddleSticks','Chogath','Zed','Lucian','Caitlyn','Corki','Zyra','Syndra','Gragas','Olaf'] 


     }); 

    }); 
    eventFire(document.getElementById('myWords'), 'click'); 

    } 

</script> 


    </body> 
</html> 

任何人都可以找出解決方案嗎?

+0

你想使用CSS動畫,只需設置開始和結束,還是你想實時控制旋轉? – Blindman67

+0

老實說,我不會在使用CSS或JS動畫之間挑剔。我只想要一個單詞列表快速旋轉,然後降低速度直到停止。我認爲這樣做的最好方法是JS,但我對JS不太好用 –

回答

1

您可以修改一下wordrotator插件,以便它允許更改每次旋轉的速度。

你必須調整動畫和速度增量,但是這應該給你一些想法:

(function ($) { 
 

 
    $.fn.wordsrotator = function (options) { 
 
     var defaults = { 
 
      autoLoop: true, 
 
      randomize: false, 
 
      stopOnHover: false, 
 
      changeOnClick: false, 
 
      words: null, 
 
      animationIn: "flipInY", 
 
      animationOut: "flipOutY", 
 
      speed: 40, 
 
      onRotate: function() {},//you add these 2 methods to allow the effetct 
 
      stopRotate: function() {} 
 

 
     }; 
 
     var settings = $.extend({}, defaults, options); 
 
     var listItem 
 
     var array_bak = []; 
 
     var stopped = false; 
 

 
     settings.stopRotate = function() {//you call this one to stop rotate 
 
      stopped = true; 
 
     } 
 

 
     return this.each(function() { 
 
      var el = $(this) 
 
      var cont = $("#" + el.attr("id")); 
 
      var array = []; 
 

 
      //if array is not empty 
 
      if ((settings.words) || (settings.words instanceof Array)) { 
 
       array = $.extend(true, [], settings.words); 
 

 
       //In random order, need a copy of array 
 
       if (settings.randomize) array_bak = $.extend(true, [], array); 
 

 

 
       listItem = 0 
 
       //if randomize pick a random value for the list item 
 
       if (settings.randomize) listItem = Math.floor(Math.random() * array.length) 
 

 
       //init value into container 
 
       cont.html(array[listItem]); 
 

 

 
       // animation option 
 
       var rotate = function() { 
 

 

 
        cont.html("<span class='wordsrotator_wordOut'><span>" + array[listItem] + "</span></span>"); 
 

 
        if (settings.randomize) { 
 
         //remove printed element from array 
 
         array.splice(listItem, 1); 
 
         //refill the array from his copy, if empty 
 
         if (array.length == 0) array = $.extend(true, [], array_bak); 
 
         //generate new random number 
 
         listItem = Math.floor(Math.random() * array.length); 
 
        } else { 
 
         //if reached the last element of the array, reset the index 
 
         if (array.length == listItem + 1) listItem = -1; 
 
         //move to the next element 
 
         listItem++; 
 
        } 
 

 
        $("<span class='wordsrotator_wordIn'>" + array[listItem] + "</span>").appendTo(cont); 
 
        cont.wrapInner("<span class='wordsrotator_words' />"); 
 
        cont.find(".wordsrotator_wordOut").addClass("animated " + settings.animationOut); 
 
        cont.find(".wordsrotator_wordIn").addClass("animated " + settings.animationIn); 
 

 
        settings.onRotate();//this callback will allow to change the speed 
 

 
        if (settings.autoLoop && !stopped) { 
 
         //using timeout instead of interval will allow to change the speed 
 
         t = setTimeout(function() { 
 
          rotate() 
 
         }, settings.speed, function() { 
 
          rotate() 
 
         }); 
 
         if (settings.stopOnHover) { 
 
          cont.hover(function() { 
 
           window.clearTimeout(t) 
 
          }, function() { 
 
           t = setTimeout(rotate, settings.speed, rotate); 
 

 
          }); 
 
         }; 
 
        } 
 
       }; 
 

 

 
       t = setTimeout(function() { 
 
        rotate() 
 
       }, settings.speed, function() { 
 
        rotate() 
 
       }) 
 
       cont.on("click", function() { 
 
        if (settings.changeOnClick) { 
 
         rotate(); 
 
         return false; 
 
        }; 
 
       }); 
 

 

 

 
      }; 
 

 
     }); 
 
    } 
 

 
}(jQuery)); 
 

 
function eventFire(el, etype) { 
 
    if (el.fireEvent) { 
 
     el.fireEvent('on' + etype); 
 
    } else { 
 
     var evObj = document.createEvent('Events'); 
 
     evObj.initEvent(etype, true, false); 
 
     el.dispatchEvent(evObj); 
 
    } 
 
} 
 

 

 
function erm() { 
 
    var cont = $("#myWords"); 
 

 
    $(function() { 
 
     $("#myWords").wordsrotator({ 
 
      animationIn: "fadeOutIn", //css class for entrace animation 
 
      animationOut: "fadeOutDown", //css class for exit animation 
 
      randomize: true, 
 
      stopOnHover: true, //stop animation on hover 
 
      words: ['Heimerdinger', 'Ezreal', 'Skarner', 'Nunu', 'Kennen', 'Lulu', 'Morgana', 'Sejuani', 'Draven', 'Nocturne', 'KogMaw', 'Jinx', 'Khazix', 'Cassiopeia', 'Fiora', 'Maokai', 'Zac', 'Quinn', 'Vladimir', 'RekSai', 'LeeSin', 'TwistedFate', 'MissFortune', 'Shaco', 'Vayne', 'Sivir', 'Urgot', 'Nautilus', 'Annie', 'Fizz', 'Janna', 'Irelia', 'Karthus', 'Trundle', 'Jax', 'Graves', 'Leona', 'Rengar', 'Amumu', 'Malzahar', 'TahmKench', 'MasterYi', 'Twitch', 'Rumble', 'Nidalee', 'Shyvana', 'Veigar', 'Singed', 'Riven', 'Leblanc', 'Katarina', 'Azir', 'Viktor', 'Poppy', 'Ahri', 'Yorick', 'Aatrox', 'Brand', 'Tryndamere', 'DrMundo', 'Hecarim', 'Braum', 'Nasus', 'Pantheon', 'Elise', 'Velkoz', 'Swain', 'Darius', 'Kayle', 'Thresh', 'Nami', 'Ekko', 'Alistar', 'Galio', 'Warwick', 'Orianna', 'Sona', 'Lux', 'Ryze', 'Jayce', 'Kassadin', 'Volibear', 'Blitzcrank', 'Gangplank', 'Karma', 'XinZhao', 'Ziggs', 'Malphite', 'Tristana', 'Soraka', 'Anivia', 'Xerath', 'Renekton', 'Shen', 'Lissandra', 'Ashe', 'Mordekaiser', 'Talon', 'Zilean', 'JarvanIV', 'Rammus', 'Yasuo', 'Vi', 'Bard', 'Sion', 'Udyr', 'MonkeyKing', 'Akali', 'Diana', 'Varus', 'Kalista', 'Evelynn', 'Teemo', 'Gnar', 'Garen', 'Taric', 'FiddleSticks', 'Chogath', 'Zed', 'Lucian', 'Caitlyn', 'Corki', 'Zyra', 'Syndra', 'Gragas', 'Olaf'], 
 
      onRotate: function() { 
 
       //on each rotate you make the timeout longer, until it's slow enough 
 
       if (this.speed < 600) { 
 
        this.speed += 20; 
 
       } else { 
 
        this.stopRotate(); 
 
       } 
 
      } 
 

 

 
     }); 
 

 
    }); 
 
    eventFire(document.getElementById('myWords'), 'click'); 
 

 
}
@charset"utf-8"; 
 
.wordsrotator_words { 
 
    display: inline-block; 
 
    position: relative; 
 
    white-space:nowrap; 
 
    -webkit-transition: width 100ms; 
 
    -moz-transition: width 100ms; 
 
    -o-transition: width 100ms; 
 
    transition: width 100ms; 
 
} 
 
.wordsrotator_words .wordsrotator_wordOut, .wordsrotator_words .wordsrotator_wordIn { 
 
    position: relative; 
 
    display: inline-block; 
 
    -webkit-animation-duration: 50ms; 
 
    -webkit-animation-timing-function: ease; 
 
    -webkit-animation-fill-mode: both; 
 
    -moz-animation-duration: 50ms; 
 
    -moz-animation-timing-function: ease; 
 
    -moz-animation-fill-mode: both; 
 
    -ms-animation-duration: 50ms; 
 
    -ms-animation-timing-function: ease; 
 
    -ms-animation-fill-mode: both; 
 
} 
 
.wordsrotator_words .wordsrotator_wordOut { 
 
    left: 0; 
 
    top: 0; 
 
    position: absolute; 
 
    display: inline-block; 
 
} 
 
.wordsrotator_words .wordsrotator_wordOut span { 
 
    width: auto; 
 
    position: relative; 
 
} 
 
.wordsrotator_words .wordsrotator_wordIn { 
 
    opacity: 0; 
 
} 
 
@-webkit-keyframes fadeInDown { 
 
    0% { 
 
     opacity: 0; 
 
     -webkit-transform: translateY(-20px); 
 
     transform: translateY(-20px); 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
} 
 
@keyframes fadeInDown { 
 
    0% { 
 
     opacity: 0; 
 
     -webkit-transform: translateY(-20px); 
 
     -ms-transform: translateY(-20px); 
 
     transform: translateY(-20px); 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(0); 
 
     -ms-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
} 
 
.fadeInDown { 
 
    -webkit-animation-name: fadeInDown; 
 
    animation-name: fadeInDown; 
 
} 
 
@-webkit-keyframes fadeOutDown { 
 
    0% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(20px); 
 
     transform: translateY(20px); 
 
    } 
 
} 
 
@keyframes fadeOutDown { 
 
    0% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(0); 
 
     -ms-transform: translateY(0); 
 
     transform: translateY(0); 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(20px); 
 
     -ms-transform: translateY(20px); 
 
     transform: translateY(20px); 
 
    } 
 
} 
 
.fadeOutDown { 
 
    -webkit-animation-name: fadeOutDown; 
 
    animation-name: fadeOutDown; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="container"> 
 
    <p><span id="myWords"></span> 
 
    </p> 
 
    <div class="main"> <a href="#" onclick="erm()">Go!</a> 
 
    </div> 
 
</div>

+0

謝謝,我做了一些調整,現在它完美地工作。 –