我希望根據滾動的總頁面的百分比淡入不同的影像。這個想法是在整個頁面上以均勻的間隔顯示影像。
現在，我有以下基于滾動像素數量的代碼。但由于這不適用于不同的設備，因此不適合我的想法。有誰知道如何從下面的內容中獲取并使其占整個頁面的百分比？
謝謝！
$("#c1").fadeIn(500);
$(document).scroll(function () {
var pos = $(document).scrollTop();
if (pos < 500) { hideAll("c1"); $("#c1").fadeIn(500); }
if (pos > 1000 && pos < 1500) { hideAll("c2"); $("#c2").fadeIn(500); }
if (pos > 2000 && pos < 2500) { hideAll("c3"); $("#c3").fadeIn(500); }
if (pos > 3000 && pos < 3500) { hideAll("c4"); $("#c4").fadeIn(500); }
if (pos > 4000 && pos < 4500) { hideAll("c5"); $("#c5").fadeIn(500); }
if (pos > 5000 && pos < 5500) { hideAll("c6"); $("#c6").fadeIn(500); }
});
function hideAll(exceptMe) {
$(".bg").each(function (i) {
if ($(this).attr("id") == exceptMe) return;
$(this).fadeOut();
});
}body {height:9500px;}
.bg{width:25%;z-index:-1;display:none;position:fixed;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}
.bg img{max-height:100%}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
<div id="c1" class="bg" style="display: block;"><img src="https://dummyimage.com/600x400/000/aaa" /></div>
<div id="c2" class="bg"><img src="https://dummyimage.com/600x400/d400d4/fff" /></div>
<div id="c3" class="bg"><img src="https://dummyimage.com/600x400/47d400/fff" /></div>
<div id="c4" class="bg"><img src="https://dummyimage.com/600x400/007cd4/fff" /></div>
<div id="c5" class="bg"><img src="https://dummyimage.com/600x400/00d463/fff" /></div>
<div id="c6" class="bg"><img src="https://dummyimage.com/600x400/a6d400/fff" /></div>
</div>uj5u.com熱心網友回復：
啊，我現在明白了，所以我相信這對你有用，它使用的方法來自
iPhone / iPad的javascript滾動事件？
我在 android 和 Iso 上使用 browserstack.com 的移動模擬器對其進行了測驗，兩者似乎都可以作業
$("#c1").fadeIn(500);
//use touch move for ISO mobile
window.addEventListener("touchmove", Scroll, false);
window.addEventListener("scroll", Scroll, false);
function Scroll() {
var windowHeight = jQuery(document).height();
//Capture where the top of the page is after scroll
var currentPosition = jQuery(document).scrollTop();
//Capture how many pixels can be viewed by the user
var windowViewingArea = jQuery(window).height();
//Figure out the bottom of what the user has scrolled to
var bottomScrollPosition = currentPosition windowViewingArea;
//Figure out the rounded percentage of how much was scrolled
var percentScrolled = parseInt((bottomScrollPosition / windowHeight * 100).toFixed(0));
//console.log(percentScrolled)
if (percentScrolled >= 15 && percentScrolled < 30) {
hideAll("c1");
$("#c1").fadeIn(500);
} else if (percentScrolled >= 30 && percentScrolled < 45) {
hideAll("c2");
$("#c2").fadeIn(500);
} else if (percentScrolled >= 45 && percentScrolled < 60) {
hideAll("c3");
$("#c3").fadeIn(500);
} else if (percentScrolled >= 60 && percentScrolled < 75) {
hideAll("c4");
$("#c4").fadeIn(500);
} else if (percentScrolled >= 75 && percentScrolled < 90) {
hideAll("c5");
$("#c5").fadeIn(500);
} else if (percentScrolled >= 90) {
hideAll("c6");
$("#c6").fadeIn(500);
}
}
function hideAll(exceptMe) {
$(".bg").each(function(i) {
if ($(this).attr("id") == exceptMe) return;
$(this).fadeOut();
});
}body {
height: 9500px;
}
.bg {
width: 25%;
z-index: -1;
display: none;
position: fixed;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.bg img {
max-height: 100%
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
<div id="c1" class="bg" style="display: block;"><img src="https://dummyimage.com/600x400/000/aaa" /></div>
<div id="c2" class="bg"><img src="https://dummyimage.com/600x400/d400d4/fff" /></div>
<div id="c3" class="bg"><img src="https://dummyimage.com/600x400/47d400/fff" /></div>
<div id="c4" class="bg"><img src="https://dummyimage.com/600x400/007cd4/fff" /></div>
<div id="c5" class="bg"><img src="https://dummyimage.com/600x400/00d463/fff" /></div>
<div id="c6" class="bg"><img src="https://dummyimage.com/600x400/a6d400/fff" /></div>
</div>這就是你所追求的嗎？
uj5u.com熱心網友回復：
您可以使用具有跨瀏覽器支持的檔案滾動事件：
https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event#browser_compatibility
這是您使用該方法的代碼：
$("#c1").fadeIn(500);
document.addEventListener('scroll', function(e) {
var pos = window.scrollY;
if (pos < 500) {
hideAll("c1");
$("#c1").fadeIn(500);
}
if (pos > 1000 && pos < 1500) {
hideAll("c2");
$("#c2").fadeIn(500);
}
if (pos > 2000 && pos < 2500) {
hideAll("c3");
$("#c3").fadeIn(500);
}
if (pos > 3000 && pos < 3500) {
hideAll("c4");
$("#c4").fadeIn(500);
}
if (pos > 4000 && pos < 4500) {
hideAll("c5");
$("#c5").fadeIn(500);
}
if (pos > 5000 && pos < 5500) {
hideAll("c6");
$("#c6").fadeIn(500);
}
});
function hideAll(exceptMe) {
$(".bg").each(function(i) {
if ($(this).attr("id") == exceptMe) return;
$(this).fadeOut();
});
}body {
height: 9500px;
}
.bg {
width: 25%;
z-index: -1;
display: none;
position: fixed;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.bg img {
max-height: 100%
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
<div id="c1" class="bg" style="display: block;"><img src="https://dummyimage.com/600x400/000/aaa" /></div>
<div id="c2" class="bg"><img src="https://dummyimage.com/600x400/d400d4/fff" /></div>
<div id="c3" class="bg"><img src="https://dummyimage.com/600x400/47d400/fff" /></div>
<div id="c4" class="bg"><img src="https://dummyimage.com/600x400/007cd4/fff" /></div>
<div id="c5" class="bg"><img src="https://dummyimage.com/600x400/00d463/fff" /></div>
<div id="c6" class="bg"><img src="https://dummyimage.com/600x400/a6d400/fff" /></div>
</div>您遇到哪些瀏覽器/設備問題？您需要幫助根據滾動頁面的百分比進行影像交換嗎？
我希望這有幫助
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/498390.html
標籤：javascript jQuery 图片