Question

我的页面中有很多圆形图像。当我垂直滚动时，无论中心图像在我的页面中，它都应该像图中所示的效果一样放大。我不知道该怎么做。所以我不发布任何jsfiddle。

enter image description here

Answer 1

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

这会奏效。

垂直滚动时如何使中心图像更大？

1 个答案: