У меня много изображений круга на моей странице. Когда я прокручиваю вертикально, независимо от того, что изображение центра на моей странице, оно должно быть увеличено как эффект, как показано на рисунке. Я не знаю, как это сделать. Поэтому я не отправляю jsfiddle.Как сделать изображение центра большим при прокрутке по вертикали?
<html>
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
#spacer{height:1000px;}
#content{overflow-y:scroll;height:100%;width:100%;background:white;}
</style>
</head>
<body bgcolor="#fff">
<div id="content">
<div id="spacer"><!--other images --></div>
<img src="lock.png" class="images" id="firstimage"><br><br><img src="lock.png" class="images" id="secondimage"><br><br><img src="lock.png" class="images" id="thirdimage">
<div id="spacer"><!--other images --></div>
<span id="positionvalueboard" style="position:fixed;right:0px;top:0px;"><!--the position (from top) value (in %) to be displayed --></span>
<script>
$(document).ready(function(){
var repeataction= function() {
var height=$(window).height(); /*WINDOW HEIGHT */
var position=$("#firstimage").position(); /*POSITION OF THE IMAGE */
var percent=position.top/height*100; /*CALCULATION OF PERCENTAGE */
$("#positionvalueboard").text(percent); /*CAN BE REMOVED IF NOT NEEDED */
$("#firstimage").height(percent*2); /* FOR THE 1st HALF ('*x' size increased x times) */
if(percent>50){$("#firstimage").height((100-percent)*2)}; /* FOR THE 2nd HALF ('*x' size increased x times) */
};
var timeOut= setInterval(repeataction, 1); /* USED TO REPEAT THE ACTION */
});
</script>
<script>
$(document).ready(function(){
var repeataction= function() {
var height=$(window).height(); /*WINDOW HEIGHT */
var position=$("#secondimage").position(); /*POSITION OF THE IMAGE */
var percent=position.top/height*100; /*CALCULATION OF PERCENTAGE */
$("#secondimage").height(percent*2); /* FOR THE 1st HALF ('*x' size increased x times) */
if(percent>50){$("#secondimage").height((100-percent)*2)}; /* FOR THE 2nd HALF ('*x' size increased x times) */
};
var timeOut= setInterval(repeataction, 1); /* USED TO REPEAT THE ACTION */
});
</script>
<script>
$(document).ready(function(){
var repeataction= function() {
var height=$(window).height(); /*WINDOW HEIGHT */
var position=$("#thirdimage").position(); /*POSITION OF THE IMAGE */
var percent=position.top/height*100; /*CALCULATION OF PERCENTAGE */
$("#thirdimage").height(percent*2); /* FOR THE 1st HALF ('*x' size increased x times) */
if(percent>50){$("#thirdimage").height((100-percent)*2)}; /* FOR THE 2nd HALF ('*x' size increased x times) */
};
var timeOut= setInterval(repeataction, 1); /* USED TO REPEAT THE ACTION */
});
</script>
</div>
</body>
</html>
это будет работать.
Сначала попробуйте код без добавления какого-либо другого изображения (просто замените lock.png). Кроме того, для большего количества изображений вам нужно умножить код jquery. –
Это действительно работает. :/ –
Попробуйте на нем Mac/PC (создав новый .html-файл), а не на jsfiddle или на любом другом сайте, он не работает на jsfiddle. –
Можете ли вы просто создать файл с длинными изображениями с точками, чтобы получить этот эффект? Или вам нужно увеличить размер div, когда пользователь прокручивается вниз? – tempranova
, чтобы увеличить размер div, когда пользователь прокручивается вниз. Все div, которые идут точно в центр, постепенно увеличивают их размер. –
Некоторые вопросы - это отзывчивая страница? круги меняются с переходом? это изменение в мертвой точке или количество пикселей от нижней или верхней? – Neil