一款基於jquery實現的鼠標單擊出現水波特效

今天要爲你們紹一款由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

注：本文愛編程原創文章，轉載請註明原文地址：http://www.w2bc.com/Article/6909