Question

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

这是我不理解的文字旋转部分。我想我可以使用jquery animate css top adjust来触发div的上下移动。

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

我找到了一个类似的答案我希望实现jQuery: Toggle rotate div on click function如果我知道如何使用if（）语句会很棒。我无法弄清楚里面放什么！ T_T

一个例子是this website的顶部黑色面板，页面右侧有一个小箭头标签，触发顶部面板隐藏/显示或向上/向下移动。

Answer 1

这样的东西？

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

请注意它正在使用第三方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">↓</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);
});

单击时旋转文本链接

1 个答案: