如何在垂直滾動時使中心圖像變大？

我的網頁有很多圈子圖片。當我垂直滾動時，無論中心圖像在我的頁面中，它應該像圖中所示的效果那樣放大。我不知道如何做到這一點。所以我不會發布任何jsfiddle。如何在垂直滾動時使中心圖像變大？

enter image description here

2014-01-31 madhu kumar

你可以製作一個長點的圖像文件文件來獲得這種效果嗎？或者，當用戶向下滾動時，是否需要增加div的大小？ – tempranova

在用戶向下滾動時增加div的大小。所有到達中心的div都逐漸增大。 –

一些問題 - 頁面是否響應？這個圈子是否會隨着轉變而改變？是死點或從底部或頂部的像素量的變化？ – Neil

<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>

這會工作。

來源

2014-02-02 09:54:03

首先嚐試代碼而不添加任何其他圖像（只需更換lock.png）。另外，對於更多的圖像，你需要乘以jQuery代碼。 –

它確實有效。：/ –

在Mac/PC上（通過創建一個新的.html文件）嘗試它，而不是在jsfiddle或任何其他網站上，它不適用於jsfiddle。 –

如何在垂直滾動時使中心圖像變大？

回答

相關問題