一款基于jquery实现的鼠标单击出现水波特效

浏览数：36 / 时间：2015年06月09日

今天要为大家绍一款由jquery实现的鼠标单击出现水波特效。用鼠标猛点击页面，你可以看到页面不断出面水波纹效果。然后水波纹渐渐消失。效果非常不错。我们一起看下效果图：

实现的代码。

html代码：

 <div id="container">
        <h1>
            Click or Touch the Screen.</h1>
        <p>
            Click as fast as you can. <em>Try it on a touchscreen - it‘s even more fun.</em></p>
</div>

css代码：

  * {
  user-select: none;
  cursor: default;
}

body, html {
  height: 100%;
  font-family: helvetica neue,helvetica,arial,sans-serif;
}

h1, p {
  text-align: center;
  position: relative;
  z-index: 1;
}

h1 {
  padding: 50px 0;
  margin: 0 50px;
  font-size: 30px;
  line-height: 30px;
  font-weight: 200;
}

p {
  font-size: 14px;
  font-weight: 200;
  margin: 0 50px;
  color: #53646e;
}
p em {
  color: #42a6df;
}

#container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#container button {
  padding: 20px;
  border: none;
  background: transparent;
  display: block;
  position: relative;
  z-index: 3;
  margin: 0 auto;
}

.dot {
  height: 2px;
  width: 2px;
  border-radius: 100%;
  position: absolute;
  z-index: 0;
  animation: sploosh 3s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: transparent;
}

@keyframes sploosh {
  0% {
    box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
    background: rgba(66, 166, 223, 0.7);
  }
  100% {
    box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
    background: rgba(66, 166, 223, 0);
  }
}

js代码：

  $(window).ready(function () {
            setTimeout(function () {
                setTimeout(function () {
                    $(‘#container‘).append(‘<div class="dot" style="top:50%;left:50%;"></div>‘)
                }, 900);
                setTimeout(function () {
                    $(‘#container‘).append(‘<div class="dot" style="top:50%;left:50%;"></div>‘)
                }, 600);
                setTimeout(function () {
                    $(‘#container‘).append(‘<div class="dot" style="top:50%;left:50%;"></div>‘)
                }, 300);
                setTimeout(function () {
                    $(‘#container‘).append(‘<div class="dot" style="top:50%;left:50%;"></div>‘)
                }, 0);
                setTimeout(function () {
                    $(‘#container .dot‘).remove();
                }, 2900);
            }, 1500);
        });


        // click animation

        if (Modernizr.touch) {
            $(‘#container‘).on(‘touchstart‘, function (e) {
                var left = e.originalEvent.touches[0].pageX;
                var top = e.originalEvent.touches[0].pageY;

                $(this).append(‘<div class="dot" style="top:‘ + top + ‘px;left:‘ + left + ‘px;"></div>‘)
                setTimeout(function () {
                    $(‘#container .dot:first-of-type‘).remove();
                }, 3000);
            });
            document.body.addEventListener(‘touchmove‘, function (e) {
                e.preventDefault();
            });
        } else {
            $(‘#container‘).on(‘mousedown‘, function (e) {
                var left = e.pageX;
                var top = e.pageY;

                $(this).append(‘<div class="dot" style="top:‘ + top + ‘px;left:‘ + left + ‘px;"></div>‘)
                setTimeout(function () {
                    $(‘#container .dot:first-of-type‘).remove();
                }, 3000);
            });
        } //@ sourceURL=pen.js