1

我是javascripting的初学者。我想知道如何编写一个在单击文本链接时在容器内上下移动的 div。

这是我不明白的文本旋转部分。我想我可以使用 jquery animate css top 调整来触发 div 的上下移动。

但我不知道如何编写脚本 .click 函数 > 向下触发 div，箭头文本向上旋转 ^，否则触发 div 向上，箭头文本向下旋转 v（或返回原始状态，即向下箭头 v）。

我找到了一个我想实现jQuery 的类似答案：Toggle rotate div on click function如果我知道如何使用 if() 语句，那就太好了。不知道里面放什么！T_T

一个例子是这个网站的顶部黑色面板，页面右侧有一个小箭头选项卡，可以触发顶部面板隐藏/显示或向上/向下移动。

4

1 回答 1

1

像这样的东西？

工作示例在这里：http: //jsfiddle.net/GaJBy/1/

请注意，它使用的是第 3 方 jQueryRotate 插件（http://www.nealfletcher.co.uk/js/jQueryRotate.js）。

CSS：

#outerDiv {
    position: relative; 
    height: 300px; 
    width: 300px; 
    background: #FFF; 
    border: 1px solid #A0A0A0
}

#innerDiv {
    position: absolute; 
    border: 1px solid #CCC; 
    width: 50px; 
    height: 50px; 
    vertical-align: middle; 
    text-align: center;
    font-size: 36px
}

HTML：

<div id="outerDiv">
    <div id="innerDiv">↓&lt;/div>
</div>

JS：

$("#innerDiv").click(function () { // Attach click listener
    var duration = 500;
    // If the square is not at the top, go down otherwise go back up       
    if (parseInt($(this).css("top")) > 0) {
        finalPosition = 0;
        startingAngle = 180;
        endingAngle = 0;
    } else {
        finalPosition = $("#outerDiv").height() - $(this).height();
        startingAngle = 0;
        endingAngle = 180;
    }

    $(this).rotate({
        angle: startingAngle,
        animateTo: endingAngle,
        duration: duration
    });

    $(this).animate({
        top: finalPosition
    }, duration);
});
于 2013-06-27T16:34:31.923 回答