Jquery / Jquery工具获得更小的效果

时间:2011-08-16 08:06:49

标签: jquery html5 jquery-tools

我想用JQuery Tools(或者只使用JQuery)和HTML5开发一个屏幕。屏幕上会有一个主面板,上面会有圆角方形按钮。当用户单击按钮时,此面板将变小并将放置在左侧,将在右侧显示某些内容。

我的意思是:

clicking

大方块内的正方形象征着按钮。当用户单击1处的按钮时,面板将变小并向左移动,如2。

我可以使用:JQuery Tools

2 个答案:

答案 0 :(得分:1)

See demo

以下内容适用于Chrome,Safari,FF 4+和Opera 10+。神奇的是CSS3 transformtransition

<强> HTML:

<a href="#" id="r">Reset</a>
<div id="z"><!-- this is the button container --></div>

<强> jQuery的:

$('#z a').click(function(e){
    e.preventDefault();
    $('#z').addClass('dock');
});
$('#r').click(function(e){
    e.preventDefault();
    $('#z').removeClass('dock');
});

<强> CSS:

#z {
    position: absolute; left: 150px; top: 150px;
    transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-tranform: scale(1.1);
    transition: 0.6s ease-in;
    -o-transition: 0.6s ease-in;
    -moz-transition: 0.6s ease-in;
    -webkit-transition: 0.6s ease-in;
    -webkit-backface-visibility: hidden; // prevent webkit bug
}

#z.dock {
    left: -70px; top: -10px;
    transform: scale(0.5);
    -o-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transition: 1s ease-out;
    -o-transition: 1s ease-out;
    -moz-transition: 1s ease-out;
    -webkit-transition: 1s ease-out;
    -webkit-backface-visibility: hidden; // prevent webkit bug
}

See demo

答案 1 :(得分:0)

毕竟看起来像我found some time。在Chrome 15中似乎适合我,所以也可能在其他基于webkit的浏览器中工作。这只是一个起点,因此跨浏览器代码需要一些关注。

使用Updated demo

修改 shrinkTo jQuery plugin

HTML

<a href="#" id="shrinkify">Shrinkify me</a>
<div id="small"></div>
<div id="big">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</div>

CSS

#big {
    width:240px;
    height:240px;
    border:4px solid black;
    padding:5px;
    text-align:center;
    display:table-cell; 
    vertical-align:middle;
    position:relative;
    left:200px;
}

#big a {
    display:inline-block;
    border:2px solid black;
    -webkit-border-radius:5px;
    width:55px;
    height:55px;
}

#small {
    position:absolute;
    top:100px;
    width:120px;
    height:120px;
    visibility:hidden;
}

的JavaScript

$('#shrinkify').click(function() {
    $('div#big').shrinkTo($('#small'), {
        duration: 1000,
        easing: 'swing',
        opacity: false
    });
    return false;
});