jquery e.page,imagesloaded(学習62日目TIL)
11745 ワード
210909は、今日、マウスの移動順に対応する画像を表示する例によって、ビデオ再生の効果とページのロードを実現した.
$("body").on("mousemove",function(e){
//변수 wid에 현재 브라우저의 넓이 저장
var wid = $(window).width();
//변수에 화면상에 마우스 커서의 위치 저장
var posX = e.pageX;
// window 가로값에서 마우스의 위치는 몇%에 있는지?
// 변수 percent에 200까지(사진의 갯수만큼)의 백분율 수치 저장
var percent = Math.floor((posX/wid)*200);
//해당 변수 값을 h3에 출력
$("h3").text(percent);
//현재 마우스 커서의 위치에 해당하는 이미지 순서만 보이도록 처리
$("section > img").hide();
$("section > img").eq(percent).show();
});
/* 로딩 페이지 */
// imagesloaded 플러그인을 활용
function imageProgress() {
var $container = $('#progress'), // div
$progressBar = $container.find('.progress-bar'), // span
$progressText = $container.find('.progress-text'),
imgLoad = imagesLoaded('body'),
imgTotal = imgLoad.images.length, // body의 전체 이미지 갯수
imgLoaded = 0, // 이미지 로딩한 숫자
current = 0, // text에 들어갈 숫자
progressTimer = setInterval(updateProgress, 1000 / 60);
imgLoad.on('progress', function() {
imgLoaded++;
});
function updateProgress() {
var target = (imgLoaded / imgTotal) * 100; // bar width: 0~100%, %값으로 변환
current += (target - current) * 0.1;
$progressBar.css({ width: current + '%' });
$progressText.text(Math.floor(current) + '%');
if (current >= 100) {
clearInterval(progressTimer);
$container.addClass('progress-complete');
$progressBar.add($progressText).delay(500).animate({opacity: 0}, 250, function() {
$container.animate({ top: '-100%' }, 1000);
});
}
if (current > 99.9) {
current = 100;
}
}
}
imageProgress();
Reference
この問題について(jquery e.page,imagesloaded(学習62日目TIL)), 我々は、より多くの情報をここで見つけました https://velog.io/@inusneo/Jquery-e.page-Math.floor-학습-62일차-TILテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol