Всего лишь серия анимаций jquery, которые изменяются на заданное количество пикселей, должны помочь. Вы всегда можете использовать что-то вроде parseInt($('#test').css('width'))
в математике для определения того, сколько нужно изменить, если вы хотите, чтобы масштабированные объекты отскакивали больше / меньше
function scaleUp() {
var image = document.getElementById('test');
image.style.WebkitTransform = ('scale(2,2)');
}
function bounce() {
$('#test').animate({
'width': "-=20",
'height': "-=20"
}, 150);
$('#test').animate({
'width': "+=30",
'height': "+=30",
}, 150);
$('#test').animate({
'width': "-=20",
'height': "-=20",
}, 150);
$('#test').animate({
'width': "+=10",
'height': "+=10",
}, 150);
}
div#test {
position:relative;
display: block;
width: 50px;
height: 50px;
background-color: blue;
margin: 50px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> </div>
<button class = 'butt' onclick = 'bounce()'>Bouncey</button>
<button class = 'butt' onclick = 'scaleUp()'>Scale up bouncey</button>
Здесь они объединены в одно с анимацией для роста / сжатия:
function scaleUp() {
var image = document.getElementById('test');
image.style.WebkitTransform = ('scale(2,2)');
}
function bounce() {
const width = parseInt($('#test').css('width'));
const height = parseInt($('#test').css('height'));
$('#test').animate({
'width': parseInt($('#test').css('width'))*2.2,
'height': parseInt($('#test').css('height'))*2.2
}, 300);
$('#test').animate({
'width': "-=20",
'height': "-=20"
}, 150);
$('#test').animate({
'width': "+=30",
'height': "+=30",
}, 150);
$('#test').animate({
'width': "-=20",
'height': "-=20",
}, 150);
$('#test').animate({
'width': "+=10",
'height': "+=10",
}, 150);
$('#test').animate({
'width': width,
'height': height
}, 300);
}
div#test {
position:relative;
display: block;
width: 50px;
height: 50px;
background-color: blue;
margin: 50px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> </div>
<button class = 'butt' onclick = 'bounce()'>Bouncey</button>
Наш взгляд как это:
web/
web/WEB-INF/ (sometimes we use a conf/ dir at the top level but this is minimal)
src/
lib/
build.xml имеет три цели:
Эта структура является немного неофициальной, и можно сделать это более чисто при наличии отдельного каталога сборки для warfile и/или отдельного каталога компиляции, и т.д. Некоторым людям не нравится идея развернуться непосредственно к веб-приложению вместо того, чтобы создать войну сначала. Но разбудить что-то и работающий быстро, вышеупомянутое сделает приятно.
Возможно, не самое минималистское, но проект Tomcat имеет Руководство Разработчика приложений с разделом по исходному расположению и демонстрационному build.xml
Кроме того, при запуске нового проекта Вы могли бы хотеть проверить Знатока. Со Знатоком, вместо того, чтобы создать Ваши собственные сценарии сборки, Вы придерживаетесь стандартного расположения, чтобы сделать материал, и затем Знаток выясняет все остальные. Это также управляет зависимостями, включая его собственное. Кривая обучения немного крута, все же.
Необходимо проверить знатока. Это действительно сложно, но создавать военный файл это просто, и существуют плагины, которые развернут войну на коте.