我想用JQuery Tools(或者只使用JQuery)和HTML5开发一个屏幕。屏幕上会有一个主面板,上面会有圆角方形按钮。当用户单击按钮时,此面板将变小并将放置在左侧,将在右侧显示某些内容。
我的意思是:
大方块内的正方形象征着按钮。当用户单击1处的按钮时,面板将变小并向左移动,如2。
我可以使用:JQuery Tools
答案 0 :(得分:1)
以下内容适用于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
}
答案 1 :(得分:0)
毕竟看起来像我found some time。在Chrome 15中似乎适合我,所以也可能在其他基于webkit的浏览器中工作。这只是一个起点,因此跨浏览器代码需要一些关注。
使用Updated demo 的<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>
#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;
}
$('#shrinkify').click(function() {
$('div#big').shrinkTo($('#small'), {
duration: 1000,
easing: 'swing',
opacity: false
});
return false;
});