0

我是 jquery 新手，有一个简单的问题。我已经尝试了所有将 div 从顶部弹出到从右侧弹出的方式。我曾尝试操纵 js 将 div 向右移动，操纵 css 使 div 出现在不同的位置，但我永远无法超越只能水平移动 div。请启发我如何做到这一点。:)

(function($){

/* Converting an element into a bounce box: */
$.fn.bounceBox = function(){

    /*
        Applying some CSS rules that center the
        element in the middle of the page and
        move it above the view area of the browser.
    */

    this.css({
        top     : -this.outerHeight(),
        marginLeft  : -this.outerWidth()/2,
        position    : 'fixed',
        left        : '50%'
    });

    return this;
}

/* The boxShow method */
$.fn.bounceBoxShow = function(){

    /* Starting a downward animation */

    this.stop().animate({top:0});
    this.data('bounceShown',true);
    return this;
}

/* The boxHide method */
$.fn.bounceBoxHide = function(){

    /* Starting an upward animation */

    this.stop().animate({top:-this.outerHeight()});
    this.data('bounceShown',false);
    return this;
}

/* And the boxToggle method */
$.fn.bounceBoxToggle = function(){

    /* 
        Show or hide the bounceBox depending
        on the 'bounceShown' data variable
    */

    if(this.data('bounceShown'))
        this.bounceBoxHide();
    else
        this.bounceBoxShow();

    return this;
}

})(jQuery);
$(document).ready(function(){

/* Converting the #box div into a bounceBox: */
$('#box').bounceBox();
$('#box').css('left');
/* Listening for the click event and toggling the box: */
$('a.button').click(function(e){
    $('#box').bounceBoxToggle();
    e.preventDefault();
});

/* When the box is clicked, hide it: */
$('#box').click(function(){
    $('#box').bounceBoxHide();
});
});

这是 JSFiddle：http: //jsfiddle.net/pzVxd/

感谢您的帮助！

（披露：我从一篇教程杂志文章中获得了此代码。）

4

1 回答 1

4

好的，我很快修改了您的代码，使其从右侧弹出。这只是你想要的吗？

首先，我修改了 $this.css 如下：

this.css({
    right           : -this.outerWidth(),
    marginTop   : -this.outerHeight()/2,
    position    : 'fixed',
    bottom      : '50%'
});

然后我修改了boxShow和boxHide函数如下：

$.fn.bounceBoxShow = function(){

/* Starting a downward animation */

    this.stop().animate({right:0});
    this.data('bounceShown',true);
    return this;
}

/* The boxHide method */
$.fn.bounceBoxHide = function(){

    /* Starting an upward animation */

    this.stop().animate({right:-this.outerWidth()});
    this.data('bounceShown',false);
    return this;
}

让我知道这是否对您有用。

于 2013-09-17T16:17:02.777 回答