使用typed.js时如何改变背景？

Question

我正在使用 link http://www.mattboldt.com/demos/typed-js/ 中的 typed.js。它的工作非常好。现在我想在每次完成一个句子时更改我的 body 背景。

我的意思是当 "abcd ef" 出现时背景应该是蓝色的。

for "ghijkl" ---背景应该是红色的

等等。我怎样才能做到这一点。如果有人有任何想法，请与我分享。我在下面添加我的代码。

                <div id="typed-strings">
                       <p><span>abcd ef.</span></p>
                       <p><span>ghijkl.</span></p>
                       <p><span>mnopqr.</span></p>
                       <p><span>stuvwxyz.</span></p>
                </div>
                <span id="typed" class=""></span> 



<script src="/assets/typed.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function(){

        $("#typed").typed({
            // strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
            stringsElement: $('#typed-strings'),
            typeSpeed: 60,
            backDelay: 800,
            loop: true,
            contentType: 'html', // or text
            // defaults to false for infinite loop
            loopCount: false,
            callback: function(){ foo(); },
            resetCallback: function() { newTyped(); }
        });

        $(".reset").click(function(){
            $("#typed").typed('reset');
        });

    });

    function newTyped(){ console.log("Call");/* A new typed object */ }

    function foo(){ console.log("Callback"); }

</script>


<style type="text/css">

        /* code for animated blinking cursor */
        .typed-cursor{
            opacity: 1;
            font-weight: 100;
            font-size: 36px;
            -webkit-animation: blink 0.7s infinite;
            -moz-animation: blink 0.7s infinite;
            -ms-animation: blink 0.7s infinite;
            -o-animation: blink 0.7s infinite;
            animation: blink 0.7s infinite;
        }
        @-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-webkit-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-moz-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-ms-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-o-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
    </style>

Answer 1

这是你需要的：

在

之后

loopCount: false,

插入这一行

preStringTyped: function() { alert('background change happens now'); },

p.s。只需将 alert 更改为您的函数即可。所以，这将在每个句子开始时触发。

Answer 2

是时候设置 background-color !

就这么简单

  $(".element").typed({
    strings: ["First sentence.<style>body{background-color: yellow}</style>Second sentence.<style>body{background-color: red}</style>"],
    typeSpeed: 1,
    contentType:  "html"
  });

Answer 3

得到解决方案：

$(function(){

  var x=1;
    $("#typed").typed({
        // strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
        stringsElement: $('#typed-strings'),
        typeSpeed: 100,
        backDelay: 1000,
        loop: true,
        contentType: 'html', // or text
        // defaults to false for infinite loop
        loopCount: false,
        /*preStringTyped: function() { myfunc(); },*/
        callback: function(){ foo(); },
        preStringTyped: function() { 
            console.log(x);
            x++;
            if(x == 5) {
                x = 1;                    
            }

            if(x == 1){
                $("#start").addClass("myimg4").removeClass("myimg1 myimg2 myimg3");

            }
            if(x == 2){
                $("#start").addClass("myimg1").removeClass("myimg2 myimg3 myimg4");

            }
            if(x == 3){
                $("#start").addClass("myimg2").removeClass("myimg1 myimg3 myimg4");

            }
            if(x == 4){
                $("#start").addClass("myimg3").removeClass("myimg1 myimg2 myimg4");

            }

            myfunc(); },

        resetCallback: function() { newTyped(); }
    });



    $(".reset").click(function(){
        $("#typed").typed('reset');
    });



});

css

    .myimg1 {
        background-image: url('../assets/home/bg_1.jpg');
        -webkit-transition: background-image 0.8s ease-in-out;
        transition: background-image 0.8s ease-in-out;
    }
    .myimg2 {
        background-image: url('../assets/home/bg_2.jpg');
        -webkit-transition: background-image 0.8s ease-in-out;
        transition: background-image 0.8s ease-in-out; 
    }
    .myimg3 {
        background-image: url('../assets/home/bg_3.jpg');
        -webkit-transition: background-image 0.8s ease-in-out;
        transition: background-image 0.8s ease-in-out;
    }
    .myimg4 {
        background-image: url('../assets/home/bg_4.jpg');
        -webkit-transition: background-image 0.8s ease-in-out;
        transition: background-image 0.8s ease-in-out;
    }

使用typed.js时如何改变背景？

How to change background when using typed.js?

javascript

jquery

typed.js