Инструменты Jquery / Jquery, получающие меньший эффект - PullRequest
Новая
       15

Инструменты Jquery / Jquery, получающие меньший эффект

1 голос
/ 16 августа 2011

Я хочу разработать экран с помощью JQuery Tools (или только с JQuery) и HTML5. На экране будет главная панель с закругленными квадратными кнопками. Когда пользователь нажимает кнопку, эта панель становится меньше и будет располагаться слева, что-то появится справа.

Я имею в виду:

clicking

Квадраты внутри больших квадратов символизируют кнопки. Когда пользователь нажимает кнопку на 1, панель уменьшается и перемещается влево, как 2.

Я могу использовать это: JQuery Tools

Ответы [ 2 ]

1 голос
/ 16 августа 2011

См. Демонстрацию

Следующее будет работать для Chrome, Safari, FF 4+ и Opera 10+.Магия в CSS3 transform и transition.

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
}

См. Демонстрацию

0 голосов
/ 16 августа 2011

Похоже, я нашел время в конце концов. Кажется, работает для меня в Chrome 15, так что, вероятно, будет работать и в других браузерах на основе webkit. Это только отправная точка, поэтому кросс-браузерный код требует некоторого внимания.

Редактировать: Обновленная демоверсия , в которой используется плагин shrinkTo jQuery

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;
});
...