点击屏幕波纹效果

最新推荐文章于 2022-10-20 22:29:38 发布

Ming-code

最新推荐文章于 2022-10-20 22:29:38 发布

阅读量228

点赞数 1

分类专栏： css Jquery

本文链接：https://blog.csdn.net/xiaoming7776/article/details/107999592

版权

Jquery 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

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

 body, html {
     height: 100%;
     font-family: helvetica neue,helvetica,arial,sans-serif;
 }
 #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 linear 0s infinite;
     background: transparent;
 }

 .dot1 {
     height: 2px;
     width: 2px;
     border-radius: 100%;
     position: absolute;
     z-index: 0;
     animation: sploosh 3s linear 1s infinite;
     background: transparent;
 }
 .dot2 {
     height: 2px;
     width: 2px;
     border-radius: 100%;
     position: absolute;
     z-index: 0;
     animation: sploosh 3s linear 2s infinite;
     background: transparent;
 }

 @keyframes sploosh {
     0% {
         box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.7);
         background: rgba(0, 0, 0, 0.7);
     }
     100% {
         box-shadow: 0 0 0 400px rgba(255, 255, 255, 0);
         background: rgba(255, 255, 255, 0);
     }
 }

<div id="container">
</div>

function isMobile() {
  var userAgentInfo = navigator.userAgent;
   var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
   var mobile_flag = false;
   //根据userAgent判断是否是手机
   for (var v = 0; v < mobileAgents.length; v++) {
       if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
           mobile_flag = true;
           break;
       }
   }
   var screen_width = window.screen.width;
   var screen_height = window.screen.height;

   //根据屏幕分辨率判断是否是手机
   if(screen_width < 500 && screen_height < 800){
       mobile_flag = true;
   }
   return mobile_flag;
}
//判断是否是手机
var mobile_flag = isMobile();
if(mobile_flag){
   $('#container').on('touchstart', function (e) {
       var lengths = $("#container").find("div").length;
       if(lengths >= 3){
           $('#container .dot').remove();
           $('#container .dot1').remove();
           $('#container .dot2').remove();
       }

       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>');
       $(this).append('<div class="dot1" style="top:' + top + 'px;left:' + left + 'px;"></div>');
       $(this).append('<div class="dot2" style="top:' + top + 'px;left:' + left + 'px;"></div>');
   });
}else {
   $("#container").click(function (e) {
       var Y = e.offsetY;
       var X = e.offsetX;
       var lengths = $("#container").find("div").length;
       console.log(lengths)
       if(lengths >= 3){
           $('#container .dot').remove();
           $('#container .dot1').remove();
           $('#container .dot2').remove();
       }
       $(this).append('<div class="dot" style="top:' + Y + 'px;left:' + X + 'px;"></div>');
       $(this).append('<div class="dot1" style="top:' + Y + 'px;left:' + X + 'px;"></div>');
       $(this).append('<div class="dot2" style="top:' + Y + 'px;left:' + X + 'px;"></div>');
   })
}