Fatal编程技术网
  • javascript/
  • 使用纯Javascript和CSS点击或触摸时的视觉效果

使用纯Javascript和CSS点击或触摸时的视觉效果

javascript css

使用纯Javascript和CSS点击或触摸时的视觉效果,javascript,css,Javascript,Css,我有一个响应性强的网页，其中包含图片和文本，设计用于在移动设备上查看。我想添加视觉效果，这样每当用户触摸或点击页面时，在接触点就会发生一些事情（例如，波纹或扩大的圆圈） 理想情况下，我可以在CSS文件中放置一组不同的视觉效果，并通过向页面添加相应的效果类来选择所需的效果 我已经可以在JavaScript中检测到点击和触摸，并且知道它们的坐标，我只是不知道如何在坐标上产生效果 下面的网站在空白页面上实现了我想要的功能。不幸的是，它使用jQuery和其他各种库，我追求的是纯JavaScript和CS

我有一个响应性强的网页，其中包含图片和文本，设计用于在移动设备上查看。我想添加视觉效果，这样每当用户触摸或点击页面时，在接触点就会发生一些事情（例如，波纹或扩大的圆圈）

理想情况下，我可以在CSS文件中放置一组不同的视觉效果，并通过向页面添加相应的效果类来选择所需的效果

我已经可以在JavaScript中检测到点击和触摸，并且知道它们的坐标，我只是不知道如何在坐标上产生效果

下面的网站在空白页面上实现了我想要的功能。不幸的是，它使用jQuery和其他各种库，我追求的是纯JavaScript和CSS。我不知道足够的jQuery来转换为JavaScript

以下网站在htmls
元素中嵌入了一个很好的效果库（单击“查看演示”）。不幸的是，这些效果与按钮有关，而与屏幕位置的点击和触摸无关，我试图让它们在屏幕上工作的尝试失败了

基于安德鲁·吉尔莫的密码笔

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Click/Touch Visual Feedback</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="ping"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js'></script>
  <script  src="./script.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="ping" class="example"></div>
  <script  src="./script.js"></script>
</body>
</html>
她是jQuery+velocity.js，我想把它翻译成纯JavaScript

jQuery

(function($){
  var $ping = $('#ping');
  
  $(document).on('touchstart click', function(e){
    e.stopPropagation();
    e.preventDefault();
    
    $ping.velocity({
      opacity: 1,
      width: 100,
      height: 100
    },
    {
      easing: 'easeIn',
      duration: 300,
      begin: function(event, elements) {
        $(elements).css({
          display: 'block',
          width: 0,
          height: 0,
          top: e.clientY || e.originalEvent.touches[0].pageY,
          left: e.clientX || e.originalEvent.touches[0].pageX,
          transform: 'translate(-50%, -50%)'
        });
      }.bind(null, e)
    }).velocity({
      opacity: 0,
      width: 200,
      height: 200
    },
    {
      easing: 'linear',
      duration: 300,
      delay: 250,
      queue: false,
      complete: function(elements) {
        $(elements).css({
          display: 'none'
        });
      }
    });
    
  });
})(jQuery);
我的JavaScript和CSS技能一般，所以一个简单的工作答案就足以让我开始做剩下的工作。给定坐标，如何在坐标处获得视觉效果？

回答我自己的问题，下面的代码起作用。基本原则是：-

  • 在定义径向渐变的样式表中，当您单击/触摸页面时，它将从零开始展开。径向渐变定义椭圆盒中的渐变颜色
  • 在样式表中定义动画关键帧。这些是可以应用于径向渐变的动画。关键帧通常会更改径向渐变框的高度和宽度
  • 在脚本中，定义代码以获取单击/触摸坐标，将径向渐变置于其中心，然后将径向渐变从零扩展到最大大小。动画结束后，ping将恢复为隐藏
  • 请注意，要创建点击视觉效果库，您需要将关键帧和径向渐变（如下面CSS顶部所示）对库化
    • 这是代码

    HTML

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Click/Touch Visual Feedback</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="ping"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js'></script>
  <script  src="./script.js"></script>
</body>
</html>

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="ping" class="example"></div>
  <script  src="./script.js"></script>
</body>
</html>
    JavaScript

    function doTouch(event) {
  var clientX = event.touches[0].clientX;
  var clientY = event.touches[0].clientY;
  pingEffect(clientX, clientY);
}
function doClick(event) {
  // get the click co-ords
  var clientX = event.clientX;
  var clientY = event.clientY;
  pingEffect(clientX, clientY);
}

var pingName = 'example';

function pingEffect(clientX, clientY) {
  // get and position the ping element
  var ping = document.getElementById('ping');
  ping.style.left = clientX+'px';
  ping.style.top = clientY+'px';
  ping.style.transform = 'translate(-50%, -50%)';
  ping.style.display = 'block';
  // run the animation
  ping.classList.remove(pingName);
  void ping.offsetWidth; // trigger a DOM reflow
  ping.classList.add(pingName);
}
document.addEventListener('touchstart', doTouch);
document.addEventListener('click', doClick);
    很抱歉，我们只是给你代码一般是不赞成的。我们希望您至少可以提供一个基本代码，尝试这样做但失败了。然后，我们可以帮助您修复代码以使其正常工作，但从零开始创建一些东西在这里通常是离题的。你说你在这方面做了尝试，所以请提供其中一个尝试，以便我们可以查看它并尝试帮助你。总而言之，我只是请求你帮助我们，帮助你。也可以在没有jquery的情况下工作。