Comment utiliser JavaScript pour obtenir l'effet de zoom consistant à charger automatiquement le contenu après un défilement vers le bas de la page ?

JavaScript Comment obtenir l'effet de zoom du contenu qui se charge automatiquement lors du défilement vers le bas de la page ?

Dans la conception Web moderne, faire défiler vers le bas de la page pour charger automatiquement le contenu est une méthode courante d'optimisation de l'expérience utilisateur. Au fur et à mesure que l'utilisateur fait défiler vers le bas de la page, davantage de contenu se charge automatiquement pour fournir plus d'informations. Dans le même temps, la mise à l'échelle du contenu chargé peut augmenter la dynamique et la lisibilité de la page. Cet article explique comment utiliser JavaScript pour obtenir l'effet de zoom du contenu qui se charge automatiquement lors du défilement vers le bas de la page et fournit des exemples de code spécifiques.

Tout d'abord, nous devons configurer un élément conteneur dans la page HTML pour placer le contenu chargé. Dans l'exemple, nous utilisons un élément

window.addEventListener('scroll', function() { // 判断滚动条是否滚动到了页面底部 if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) { // 加载更多的内容 loadMoreContent(); } });

function loadMoreContent() { $.ajax({ url: 'loadContent.php', success: function(data) { // 将获取的数据添加到容器元素中 $('#contentContainer').append(data); // 对新加载的内容进行缩放效果 scaleContent(); } }); }

function scaleContent() { $('#contentContainer .zoomIn').addClass('scale'); }

#contentContainer .scale { -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }