zoukankan      html  css  js  c++  java
  • 一款基于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

  • 相关阅读:
    【linux】——FreeBSD 建立 SSH 连接慢的解决方法
    【网络编程】——connect函数遇见EINTR的处理
    【C】——幻方算法
    【C】——实现tree命令
    【数据结构】——较规范的链表操作方法
    【网络编程】——ne-snmp开发实例1
    【linux】——cscope
    【LINUX】——如何配置宿主机和虚拟机IP在同一网段
    sort /tmp space issue
    桑梓桑榆
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/3978491.html
Copyright © 2011-2022 走看看