<div id="gallery">
<img src="1.jpg" alt>
<img src="2.jpg" alt>
<img src="3.jpg" alt>
…
</div>
div#gallery {
display: -ms-flexbox;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vw;
font-size: 0;
}
div#gallery img {
width: 33.3%;
transition: .8s opacity;
}
hp
), высоту окна (hw
)smax = hp - hw
и минимальный smin = 0
hmax
) и конечный (hmin
) размеры целевого элементаs
)ds = smax - smin = smax
dh = hmax - hmin
s / ds = h / dh , где h - приращение высоты целевого элемента
h = hmax - (dh * s) / ds
h = (dh * s) / ds + hmin
var element = document.getElementById('d');
var hp = document.body.scrollHeight,
hw = window.innerHeight,
smax = hp - hw,
smin = 0,
hmin = 100,
hmax = 300,
ds = smax - smin,
dh = hmax - hmin;
window.addEventListener('scroll', function () {
var s = window.pageYOffset; // current scrollTop
var h = hmax - (dh * s) / ds;
element.style.height = h + 'px';
});
var element = document.getElementById('d');
var hmin = 100,
hmax = 300;
window.addEventListener('scroll', function () {
var s = window.pageYOffset; // current scrollTop
var h = hmax - ((hmax - hmin) * s) / (document.body.scrollHeight - window.innerHeight);
element.style.height = h + 'px';
});
npm install -g yo
npm install -g webapp-generator
npm install -g gulp-cli bower
yo webapp
чтобы поднять каркас$("div").on("click", function(){
/** что то делается **/
})
$('ближайший_родительский_и_статический_элемент').on('событие', 'динамически_подгруженный_елемент', function(){
// действия, которые надо выполнить
});
smtpObj = smtlib.SMTP("smtp.yandex.ru",587,"[10.100.16.102]")
<body>
<div class='no-bubble'>
<p class='click-target'></p>
</div>
</body>
// клик по .click-target не сработает никогда!
$('body').on('click','.click-target', function(){
// do something...
});
$('body').on('click','.no-bubble', function(e){
e.stopPropagation();
});
$('#id').click();
// не равносильно:
$('#id').on('click');
// а работает как:
$('#id').trigger('click');
// т.е. не навешивает обработчик клика, а эмулирует клик по объекту.
$('id').on('click mouseover mouseout', function(e) {
if (e.type === 'click') {
// обработать клик...
} else if (e.type === 'mouseover') {
// ну принцип понятен, да?..
}
});