Question

我正在寻找一个jquery插件，它会定期无限次地反弹div元素。我没有这样的示例网站显示，但我想要的是一个div元素，它反弹到右边（比方说）并反弹回左边。在反弹时我想改变内容。反弹也应该继续。它不应该停止或减速。

我搜索了 http://jquery.com/
http://mootools.net/

但没有找到我想要的东西。反弹会在一段时间后停止。

你能帮帮我吗？

Answer 1

如果我已正确解释您的描述，您需要一个连续左右移动的div，并在“到达”时更改内容。我仍然不确定你是想要切换内容还是循环浏览更多内容。

一个简单说明：

 __________                        __________
|          |  >>>>>>>>>>>>>>>>>>  |          |
| content1 |                      | content2 |
|__________|  <<<<<<<<<<<<<<<<<<  |__________|

     |---------------------------------|
content change                  content change

现在，因为非常具体的请求，我高度怀疑是否有这样的插件可用。你必须自己创造性！幸运的是，我是个好人，为你省下了一些工作。

请参阅online demo。

我的javascript函数：

function startBouncing(selector, content, duration, easing) {
    // get the required movement (parent width - element width)
    var movement = $(selector).parent().width() - $(selector).width();
    var contentIndex = 0; // we want to start with content index 0

    // define function that makes element go forth
    var goForth = function() {
        // start animation and change text
        $(selector).animate({
            'margin-left': movement
        }, duration, easing, goBack).children('p:first').html(content[contentIndex % content.length]);

        contentIndex++; // increment index for next time
    };

    // define function that makes element go back
    var goBack = function() {
        // start animation and change text
        $(selector).animate({
            'margin-left': 0
        }, duration, easing, goForth).children('p:first').html(content[contentIndex % content.length]);

        contentIndex++; // increment index for next time
    };

    // start the sequence
    goForth();
}

我打电话使用：

var content = [
    'content #1',
    'content #2',
    'content #3'
]; // if you wish to toggle, just use 2 elements

// calling the function
startBouncing('#bouncer', content, 2000, 'linear');

最后，HTML：

<div style="background-color: gray; height: 50px; width: 500px;">
    <div id="bouncer" style="background-color: #ff0000; height: 50px; width: 50px;">
        <p>content</p>
    </div>
</div>

它可能看起来不太好，但它确实有效。我没有花一点时间来优化代码。

修改

我已经编辑了这个功能，所以你指定了不同的持续时间并且每边都有宽松。

function startBouncing(selector, content, duration1, duration2, easing1, easing2) { // get the required movement (parent width - element width) var movement = $(selector).parent().width() - $(selector).width(); var contentIndex = 0; // we want to start with content index 0 // define function that makes element go forth var goForth = function() { // start animation and change text $(selector).animate({ 'margin-left': movement }, duration1, easing1, goBack).children('p:first').html(content[contentIndex % content.length]); contentIndex++; // increment index for next time }; // define function that makes element go back var goBack = function() { // start animation and change text $(selector).animate({ 'margin-left': 0 }, duration2, easing2, goForth).children('p:first').html(content[contentIndex % content.length]); contentIndex++; // increment index for next time }; // start the sequence goForth(); }

对于更高级的缓动字符串，您应该使用一个插件来添加更多缓动字符串，例如this一个。

Answer 2

use应该使用一个很酷的弹跳缓动效果（需要jquery ui）来组合animate函数。为了让它反复弹跳，请使用setTimeout函数..

保镖中的保镖插件

2 个答案: