使用绝对

时间:2016-01-21 18:44:05

标签: javascript jquery html css jquery-animate

所以我试着编写JS代码,使幻灯片中的图片增加大小,然后显示一个按钮。我想出的图片尺寸和按钮但是使用绝对位置设置到新的尺寸图片地方的问题之一。我的问题是:

1)我不知道如何在关闭窗户后将照片带到他以前的位置。

2)按下除了图像以外的任何地方时关闭窗口(不是必须的。

3)没有移动图像只是显示相同的图片更大与模糊的scree(可能会解决所有问题)。

我正在为一个学校项目做这个,我需要知道代码如何工作我知道如何阅读代码并理解它但是由于一些愚蠢的原因如果我们使用软件包我们需要了解软件包代码也请不要包:);

很抱歉长时间阅读,但感谢帮助者

PS。我还没有做幻灯片演示,但我只是想确保在构建它之前我可以做所有这些 JS:

<script>
    $('#Test').click(function(){
        $('#Test').animate({
            height: screen.height * .45,
            right:  screen.width * .35,
            left:  screen.width * .2, // heigth / 2
            top:'200px' // width / 2
        });

    });

</script>

HTML:

<img src="Pics/up-arrow.png" id="Test"/>

CSS:

    #Test{
width = 400px;
position:absolute;
}

1 个答案:

答案 0 :(得分:0)

您可以查看使用removeAttr()并简单地删除动画添加到元素的内联样式

$('#Test').removeAttr('style');

或者,您可以使用$('#Test').data()存储活动前需要的任何内容,然后使用它来恢复内容

var $el = $('#Test');
$el
   .data('dimensions',{height: $el.height(), width:$el.width()})
   .animate(/* opts */)

然后重置:

$el.animate( $el.data('dimensions'));

DEMO