带有 Javascript 的 Wordpress 插件

Posted 2023-05-09

【中文标题】带有 Javascript 的 Wordpress 插件

【英文标题】：Wordpress Plugin with Javascript

【发布时间】：2011-12-05 07:29:30

【问题描述】：

我正在开发一个 wordpress 插件，它允许用户输入图像 url 和 konami code。当输入 konami 代码时，会弹出一个图像，但我无法让它动画，我对 jQuery 和 javascript 有点不熟悉，而且我刚刚开始学习它......任何帮助都会很棒！

<script type="text/javascript" charset="utf-8">
if ( window.addEventListener ) 
  var kkeys = [], konami = "$this->opts['wpk_code']['current']";
  window.addEventListener("keydown", function(e)
    kkeys.push( e.keyCode );
    if ( kkeys.toString().indexOf( konami ) >= 0 )
     var elms=document.getElementById("konami").style;
     elms.display=(elms.display=="block")?"none":"block";

  , true);

</script>

【参考方案1】：

试一试 jQuery 的 animate() 上的一些示例 - 它们似乎可以满足您的需求。

【讨论】：

是的，我尝试了几种不同的方法来添加该功能 - 但是如果我删除 'var elms=document.getElementById("konami").style; elms.display=(elms.display=="block")?"none":"block";'它告诉显示器从无切换到阻止 - 图像没有出现，当我添加到代码时它没有动画。

我明白了 - 根据您的动画，您可以调用 .show() 或执行类似 $('#konami').animate( 'opacity': 'show' , 1000 );

感谢这个网站，这正是我要找的！

【参考方案2】：

试试这个：

$('#inputField').keyup(function () 
            if ($(this).val().length > 0) 
                $('#konami').animate(
                    opacity: 1,
                    left: '50'
                , 100); 
            
            else 
                $('#konami').animate(
                    opacity: 0,
                    left: '0'
                , 100); 
            
        );

html：

<input type="text" id="inputField" />
<img src="..." id="konami" style="position:relative;" />

【讨论】：

这只是添加一个输入框并隐藏图像...当用户执行特定代码时，应该会弹出一个图像-确实如此，但我想添加动画以便它滑动页面。

那你应该看看jquery中的animate方法。你可以在这里找到它：api.jquery.com/animate

看上面我添加了一些新的代码行，将图像移动 50px 并淡化。请注意，img 上的新样式属性 - style="position:relative;"很关键。

谢谢！我明白了..<script> var kkeys = []; var konami = "$this->opts['wpk_code']['current']"; $(document).keydown(function(e) kkeys.push(e.keyCode); if (kkeys.toString().indexOf(konami) >= 0) kkeys = []; $(".konami").show(1000); ); </script> <div class="konami" style="display: none"> <p class="konami2"> <img src="<?php echo $url?>" /> </p> </div>

太棒了 :) 如果您发现我的回答有用，请随时标记 :)