Question

我有一个html代码，可在摘录的第一部分在点击时更改图片。

此外，我在摘要的第二部分底部给出了一个祝贺效果代码。

我要使效果代码（祝贺您）仅在用户按下第一个HTML中的下一个图像时起作用。

我的问题是，我不知道如何将两者结合起来，只有在用户单击下一张图像时才能使效果起作用。

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <style>
    #content {
      width: 200px;
      height: 200px;
      border: 2px solid #003399;
    }
  </style>
</head>

<body onload="buildImage();">
  <script>
    var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
    var index = 0;

    function buildImage() {
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
    }

    function changeImage() {
      index++;
      if (index >= images.length) index = 0;
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
    }
  </script>


  <div class="contents" id="content"></div>
  <button onclick="changeImage()">NextImage</button>
</body>

</html>






<!----------------effects code starts-------->






<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Pop in text with stars</title>


  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

  <link rel="stylesheet" href="css/style.css">
  <style>
    @font-face {
      font-family: 'Sigmar One';
      font-style: normal;
      font-weight: 400;
      src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https://fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
    }
    
    body {
      background: #3da1d1;
      color: #fff;
      overflow: hidden;
    }
    
    .congrats {
      position: absolute;
      top: 140px;
      width: 550px;
      height: 100px;
      padding: 20px 10px;
      text-align: center;
      margin: 0 auto;
      left: 0;
      right: 0;
    }
    
    h1 {
      transform-origin: 50% 50%;
      font-size: 50px;
      font-family: 'Sigmar One', cursive;
      cursor: pointer;
      z-index: 2;
      position: absolute;
      top: 0;
      text-align: center;
      width: 100%;
    }
    
    .blob {
      height: 50px;
      width: 50px;
      color: #ffcc00;
      position: absolute;
      top: 45%;
      left: 45%;
      z-index: 1;
      font-size: 30px;
      display: none;
    }
    
    @import url(https://fonts.googleapis.com/css?family=Sigmar+One);
    body {
      background: #3da1d1;
      color: #fff;
      overflow: hidden;
    }
    
    .congrats {
      position: absolute;
      top: 140px;
      width: 550px;
      height: 100px;
      padding: 20px 10px;
      text-align: center;
      margin: 0 auto;
      left: 0;
      right: 0;
    }
    
    h1 {
      transform-origin: 50% 50%;
      font-size: 50px;
      font-family: 'Sigmar One', cursive;
      cursor: pointer;
      z-index: 2;
      position: absolute;
      top: 0;
      text-align: center;
      width: 100%;
    }
    
    .blob {
      height: 50px;
      width: 50px;
      color: #ffcc00;
      position: absolute;
      top: 45%;
      left: 45%;
      z-index: 1;
      font-size: 30px;
      display: none;
    }
  </style>

</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="congrats">
    <h1>Congratulations!</h1>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>



  <script>
    // Click "Congratulations!" to play animation

    $(function() {
      var numberOfStars = 20;

      for (var i = 0; i < numberOfStars; i++) {
        $('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
      }

      animateText();

      animateBlobs();
    });

    $('.congrats').click(function() {
      reset();

      animateText();

      animateBlobs();
    });

    function reset() {
      $.each($('.blob'), function(i) {
        TweenMax.set($(this), {
          x: 0,
          y: 0,
          opacity: 1
        });
      });

      TweenMax.set($('h1'), {
        scale: 1,
        opacity: 1,
        rotation: 0
      });
    }

    function animateText() {
      TweenMax.from($('h1'), 0.8, {
        scale: 0.4,
        opacity: 0,
        rotation: 15,
        ease: Back.easeOut.config(4),
      });
    }

    function animateBlobs() {

      var xSeed = _.random(350, 380);
      var ySeed = _.random(120, 170);

      $.each($('.blob'), function(i) {
        var $blob = $(this);
        var speed = _.random(1, 5);
        var rotation = _.random(5, 100);
        var scale = _.random(0.8, 1.5);
        var x = _.random(-xSeed, xSeed);
        var y = _.random(-ySeed, ySeed);

        TweenMax.to($blob, speed, {
          x: x,
          y: y,
          ease: Power1.easeOut,
          opacity: 0,
          rotation: rotation,
          scale: scale,
          onStartParams: [$blob],
          onStart: function($element) {
            $element.css('display', 'block');
          },
          onCompleteParams: [$blob],
          onComplete: function($element) {
            $element.css('display', 'none');
          }
        });
      });
    }
  </script>


</body>

</html>

Answer 1

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <style>
    #content {
      width: 200px;
      height: 200px;
      border: 2px solid #003399;
    }
  </style>
</head>

<body onload="buildImage();">
  <script>
    var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
    var index = 0;

    function buildImage() {
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
    }

    function changeImage() {
      index++;
      if (index >= images.length) index = 0;
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
      document.getElementById('congrats').style.display = 'block';
      
      reset();

      animateText();

      animateBlobs();
    }
  </script>


  <div class="contents" id="content"></div>
  <button onclick="changeImage()">NextImage</button>
</body>

</html>






<!----------------effects code starts-------->






<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Pop in text with stars</title>


  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

  <link rel="stylesheet" href="css/style.css">
  <style>
    @font-face {
      font-family: 'Sigmar One';
      font-style: normal;
      font-weight: 400;
      src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https://fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
    }
    
    body {
      background: #3da1d1;
      color: #fff;
      overflow: hidden;
    }
    
    .congrats {
      position: absolute;
      top: 140px;
      width: 550px;
      height: 100px;
      padding: 20px 10px;
      text-align: center;
      margin: 0 auto;
      left: 0;
      right: 0;
    }
    
    h1 {
      transform-origin: 50% 50%;
      font-size: 50px;
      font-family: 'Sigmar One', cursive;
      cursor: pointer;
      z-index: 2;
      position: absolute;
      top: 0;
      text-align: center;
      width: 100%;
    }
    
    .blob {
      height: 50px;
      width: 50px;
      color: #ffcc00;
      position: absolute;
      top: 45%;
      left: 45%;
      z-index: 1;
      font-size: 30px;
      display: none;
    }
    
    @import url(https://fonts.googleapis.com/css?family=Sigmar+One);
    body {
      background: #3da1d1;
      color: #fff;
      overflow: hidden;
    }
    
    .congrats {
      position: absolute;
      top: 140px;
      width: 550px;
      height: 100px;
      padding: 20px 10px;
      text-align: center;
      margin: 0 auto;
      left: 0;
      right: 0;
    }
    
    h1 {
      transform-origin: 50% 50%;
      font-size: 50px;
      font-family: 'Sigmar One', cursive;
      cursor: pointer;
      z-index: 2;
      position: absolute;
      top: 0;
      text-align: center;
      width: 100%;
    }
    
    .blob {
      height: 50px;
      width: 50px;
      color: #ffcc00;
      position: absolute;
      top: 45%;
      left: 45%;
      z-index: 1;
      font-size: 30px;
      display: none;
    }
  </style>

</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div style='display:none;' id='congrats' class="congrats">
    <h1>Congratulations!</h1>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>



  <script>
    // Click "Congratulations!" to play animation

    $(function() {
      var numberOfStars = 100;

      for (var i = 0; i < numberOfStars; i++) {
        $('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
      }

      animateText();

      animateBlobs();
    });

    $('.congrats').click(function() {
      reset();

      animateText();

      animateBlobs();
    });

    function reset() {
      $.each($('.blob'), function(i) {
        TweenMax.set($(this), {
          x: 0,
          y: 0,
          opacity: 1
        });
      });

      TweenMax.set($('h1'), {
        scale: 1,
        opacity: 1,
        rotation: 0
      });
    }

    function animateText() {
      TweenMax.from($('h1'), 0.8, {
        scale: 0.4,
        opacity: 0,
        rotation: 15,
        ease: Back.easeOut.config(4),
      });
    }

    function animateBlobs() {

      var xSeed = _.random(350, 380);
      var ySeed = _.random(120, 170);

      $.each($('.blob'), function(i) {
        var $blob = $(this);
        var speed = _.random(1, 5);
        var rotation = _.random(5, 100);
        var scale = _.random(0.8, 1.5);
        var x = _.random(-xSeed, xSeed);
        var y = _.random(-ySeed, ySeed);

        TweenMax.to($blob, speed, {
          x: x,
          y: y,
          ease: Power1.easeOut,
          opacity: 0,
          rotation: rotation,
          scale: scale,
          onStartParams: [$blob],
          onStart: function($element) {
            $element.css('display', 'block');
          },
          onCompleteParams: [$blob],
          onComplete: function($element) {
            $element.css('display', 'none');
          }
        });
      });
    }
  </script>


</body>

</html>

只需使祝贺文本不可见（我对display：none所做的操作），然后单击按钮时，执行为其设置动画的函数（reset（），animateText（0和animateBlobs（））以及它再次可见。

Answer 2

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
        #content {
            width: 200px;
            height: 200px;
            border: 2px solid #003399;
        }
    </style>


    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

    <style>
        @font-face {
            font-family: 'Sigmar One';
            font-style: normal;
            font-weight: 400;
            src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
        }

        @import url(https: //fonts.googleapis.com/css?family=Sigmar+One);

        body {
            overflow: hidden;
        }

        .bodyblue {
            background: #3da1d1;
            color: #fff;
        }

        .congrats {
            position: absolute;
            top: 140px;
            width: 550px;
            height: 100px;
            padding: 20px 10px;
            text-align: center;
            margin: 0 auto;
            left: 0;
            right: 0;
            display: none;
        }

        h1 {
            transform-origin: 50% 50%;
            font-size: 50px;
            font-family: 'Sigmar One', cursive;
            cursor: pointer;
            z-index: 2;
            position: absolute;
            top: 0;
            text-align: center;
            width: 100%;
        }

        .blob {
            height: 50px;
            width: 50px;
            color: #ffcc00;
            position: absolute;
            top: 45%;
            left: 45%;
            z-index: 1;
            font-size: 30px;
            display: none;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>



</head>

<body onload="buildImage();">
    <script>
        var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
        var index = 0;
        
        var timeOut;

        function buildImage() {
            document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
        }

        function changeImage() {
            index++;
            if (index >= images.length) {
                index = 0;
            }
            document.getElementById('content').style.backgroundImage = 'url(' + images[index] + (index + 1) + ')';
        }

        function animateCongrat() {

            $('.congrats').show();
            
            clearTimeout(timeOut);
            addBlueBody();

            reset();

            var numberOfStars = 20;

            for (var i = 0; i < numberOfStars; i++) {
                $('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
            }

            animateText();
            animateBlobs();
            
            hideCongratAndBlueBody();
            
        }

        function addBlueBody() {
            $('body').addClass('bodyblue');
        }

        function hideCongratAndBlueBody() {
            timeOut = setTimeout(() => {
                $('.congrats').hide();
                $('body').removeClass('bodyblue');
            }, 4000);
        }

        function reset() {
            $.each($('.blob'), function (i) {
                TweenMax.set($(this), {
                    x: 0,
                    y: 0,
                    opacity: 1
                });
            });

            TweenMax.set($('h1'), {
                scale: 1,
                opacity: 1,
                rotation: 0
            });
        }

        function animateText() {
            TweenMax.from($('h1'), 0.8, {
                scale: 0.4,
                opacity: 0,
                rotation: 15,
                ease: Back.easeOut.config(4),
            });
        }

        function animateBlobs() {

            var xSeed = _.random(350, 380);
            var ySeed = _.random(120, 170);

            $.each($('.blob'), function (i) {
                var $blob = $(this);
                var speed = _.random(1, 5);
                var rotation = _.random(5, 100);
                var scale = _.random(0.8, 1.5);
                var x = _.random(-xSeed, xSeed);
                var y = _.random(-ySeed, ySeed);

                TweenMax.to($blob, speed, {
                    x: x,
                    y: y,
                    ease: Power1.easeOut,
                    opacity: 0,
                    rotation: rotation,
                    scale: scale,
                    onStartParams: [$blob],
                    onStart: function ($element) {
                        $element.css('display', 'block');
                    },
                    onCompleteParams: [$blob],
                    onComplete: function ($element) {
                        $element.css('display', 'none');
                    }
                });
            });
        }
    </script>


    <div class="contents" id="content"></div>
    <button onclick="changeImage();animateCongrat();">Next Image</button>


    <div class="congrats">
        <h1>Congratulations!</h1>
    </div>


</body>

</html>

Onclick使效果在javascript

2 个答案: