如何在jQuery中通过函数调用创建缩放效果

帕特里克

我有代码,其中当用户单击一个link命名zoomalert with a zoom effect用户时显示给用户。

我想当same to happenclick a button...

当我尝试按一下按钮时,它不起作用。

如何实现?如何更正代码?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css'>
  <style>
    html,
    body {
      margin: 0;
      padding: 10px;
      -webkit-backface-visibility: hidden;
    }
    /* text-based popup styling */
    
    .white-popup {
      position: relative;
      background: #FFF;
      padding: 25px;
      width: auto;
      max-width: 400px;
      margin: 0 auto;
    }
    /* 

====== Zoom effect ======

*/
    
    .mfp-zoom-in {
      /* start state */
      /* animate in */
      /* animate out */
    }
    
    .mfp-zoom-in .mfp-with-anim {
      opacity: 0;
      transition: all 0.2s ease-in-out;
      transform: scale(0.8);
    }
    
    .mfp-zoom-in.mfp-bg {
      opacity: 0;
      transition: all 0.3s ease-out;
    }
    
    .mfp-zoom-in.mfp-ready .mfp-with-anim {
      opacity: 1;
      transform: scale(1);
    }
    
    .mfp-zoom-in.mfp-ready.mfp-bg {
      opacity: 0.8;
    }
    
    .mfp-zoom-in.mfp-removing .mfp-with-anim {
      transform: scale(0.8);
      opacity: 0;
    }
    
    .mfp-zoom-in.mfp-removing.mfp-bg {
      opacity: 0;
    }
  </style>
</head>

<body>
  <div class="links">
    <div class id="inline-popups">
      <a href="#test-popup" data-effect="mfp-zoom-in">Zoom</a>
      <button onClick="#test-popup" data-effect="mfp-zoom-in">test</button>

    </div>
  </div>

  <!-- Popup itself -->
  <div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Game completed sucessfull</div>

  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js'></script>
  <script src="js/index.js"></script>
</body>

</html>

拉特什

试试下面

var theControl = $("#test-popup");
            $('#clickMe').magnificPopup({
                items: {
                    src: theControl,
                },
                type: 'inline',
                mainClass: 'mfp-with-zoom', // this class is for CSS animation below
                zoom: {
                    enabled: true, // By default it's false, so don't forget to enable it

                    duration: 300, // duration of the effect, in milliseconds
                    easing: 'ease-in-out', // CSS transition easing function

                    // The "opener" function should return the element from which popup will be zoomed in
                    // and to which popup will be scaled down
                    // By defailt it looks for an image tag:
                   
                }
            });
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css'>
    <style>
                html,
                body {
                    margin: 0;
                    padding: 10px;
                    -webkit-backface-visibility: hidden;
                }
                /* text-based popup styling */

                .white-popup {
                    position: relative;
                    background: #FFF;
                    padding: 25px;
                    width: auto;
                    max-width: 400px;
                    margin: 0 auto;
                }
                /*

        ====== Zoom effect ======

        */

                .mfp-zoom-in {
                    /* start state */
                    /* animate in */
                    /* animate out */
                }

                    .mfp-zoom-in .mfp-with-anim {
                        opacity: 0;
                        transition: all 0.2s ease-in-out;
                        transform: scale(0.8);
                    }

                    .mfp-zoom-in.mfp-bg {
                        opacity: 0;
                        transition: all 0.3s ease-out;
                    }

                    .mfp-zoom-in.mfp-ready .mfp-with-anim {
                        opacity: 1;
                        transform: scale(1);
                    }

                    .mfp-zoom-in.mfp-ready.mfp-bg {
                        opacity: 0.8;
                    }

                    .mfp-zoom-in.mfp-removing .mfp-with-anim {
                        transform: scale(0.8);
                        opacity: 0;
                    }

                    .mfp-zoom-in.mfp-removing.mfp-bg {
                        opacity: 0;
                    }
    </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
 
<button id="clickMe" data-effect="mfp-zoom-in">test</button>
  <div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Game completed sucessfully</div>
  

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在 CSS 中为按钮创建缩放效果?

如何在嵌套flexbox列布局中创建图像缩放效果?

如何在jQuery / javascript中复制此图像缩放动画效果?

如何在JQuery中动态调用函数

如何在 jQuery 中调用函数

如何在类中通过函数名称调用函数

如何在表格中创建效果行

如何在处理中创建“脉冲”效果?

如何在函数中通过引用传递char []作为调用

如何通过使用jQuery在cshtml文件中调用函数?

如何在构造函数调用方法中创建变量?

如何在dplyr中动态创建或调用变量和函数?

如何在Swift中创建立即调用的函数(块)

如何访问css效果,在jQuery函数中调用一个类

如何在odoo 11中的jQuery中调用python函数

如何在jQuery中的变量中调用函数赋值

如何在Rails中通过jQuery调用JSON文件?

如何在jQuery中添加淡入效果

如何在jQuery中制作剥离效果

如何在Go中返回通过多个函数调用的函数调用实例化多个变量?

如何在JQuery中创建动画后调用重新加载

如何在angular中调用外部jQuery函数

如何在jQuery调用函数中从php获取错误消息?

如何在jQuery中调用嵌入式函数?

如何在jQuery中的函数外部调用clearInterval?在setInterval之外

如何在jQuery中单击按钮时调用函数

如何在jquery的drop方法中调用函数?

如何在OnClick事件中调用Jquery函数?

如何在JQuery或Javascript中创建“模糊橡皮擦”和“模糊绘图”效果?