0

http://www.lifechurch.org.uk/new-here/about/ http://www.lifechurch.org.uk/media/blog/

我想创建一个类似于这个的链接效果

我发现了以下内容：

$(document).ready(function() {
$("#button").click(function(){
$(".target").effect( "bounce", 
{times:3}, 300 );
});
});​

我被告知它使用图书馆，知道我可以从哪里获得这个吗？

谢谢科斯蒂

更新

我尝试将链接包装在要反弹的类中

<!doctype html>
<html>
<head><title>jQuery example</title></head>
<body>
<a href="#" id="button">Click me</a>
<div class="target">I will bounce</div>
<div class="target">I will bounce too, since I have the same class name</div>
<br>
<br>
<br>
<a href="#" id="button"><div class="target">Click me</div></a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script>
    $(document).ready(function() {
            // Notice the .on instead of .click, it's the new style for events
            // in jQuery and the e argument
            $("#button").on('click', function (e) {
                e.preventDefault();
                $(".target").effect( "bounce", { times : 3 }, 300);
            });
        });
    </script>
</body>

而且是不是很矛盾。我不确定您是否看过我希望重新创建的上述示例。但是作为链接的 H1 标题略微“弹跳”或缩进，这是我希望在 Wordpress 博客链接标题上重新创建的效果

谢谢

4

3 回答 3

1

此代码使用 JQuery ( http://www.jquery.com )，这是一个非常常见的 JavaScript 库。

“反弹”效果是名为 JQuery UI 的 JQuery 可选附加组件的一部分，请参阅http://api.jqueryui.com/bounce-effect/

编辑：Kirsty，如果你想了解 JavaScript 和 JQuery，http://www.codecademy.com有一些关于这两个主题的很棒的免费互动课程。

于 2012-12-07T09:20:17.500 回答
1

将此行添加到您的 HTML 文档中：（在其他脚本之前）

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

进而：

$(document).ready(function() {
    // Notice the .on instead of .click, it's the new style for events
    // in jQuery and the e argument
    $("#button").on('click', function (e) {
        e.preventDefault();
        $(".target").effect( "bounce", { times : 3 }, 300);
    });
});​

一些示例 HTML：

 <a href="#" id="button" class="target">Click me</a>

这里有一个 jsFiddle 可以看到它的实际 效果：http: //jsfiddle.net/fredrik/g8J3y/..fredrik

于 2012-12-07T09:23:01.617 回答
1

.effect 是 jquery-ui 的一部分

下载一个只有效果的自定义 min-js：

http://jqueryui.com/download/

于 2012-12-07T09:27:56.807 回答