본문 바로가기

[필독]콘텐츠 저작권 및 무단 복제 금지본 블로그에서 제공하는 모든 콘텐츠는 저작권법의 보호를 받습니다.

2025. 2. 4.
반응형


1. 저작권 안내블로그 내 모든 글, 이미지, 자료의 저작권은 블로그 운영자에게 있습니다.
인용 시 출처를 명확히 밝혀 주세요.


2. 무단 복제 및 도용 금지허가 없이 콘텐츠를 복사, 재배포하는 행위는 금지됩니다.
무단 사용 적발 시 법적 조치가 취해질 수 있습니다.


3. 올바른 공유 방법공유가 필요한 경우 반드시 출처를 남겨 주세요.
협업 및 사용 문의는 [leoceokj81@gmail.com일]을 통해 가능합니다.

반응형
저작자표시 비영리 변경금지 (새창열림)
setTimeout(function () { const dragSensitivity = 0.55; // 드래그 민감도 const clickTolerance = 0; // 클릭 간주 기준 (px), 0: 클릭 시 이동 안함. 클릭 시 이동하려면 1~3값 설정 고려. const dragRatioThreshold = 0.55; // 배너 너비 대비 드래그 비율, 배너 드래그 후 드롭 시. const newWindow = 1; // 1: 새 창, 0: 현재 창 const bannerConfigs = [ { selector: '.sliding-banner-300', width: 300, height: 300, id: '940041', trackingCode: 'AF2787934', // 본인의 추적 코드로 대체 subId: '', tsource: '', background: 'https://tistory1.daumcdn.net/tistory/8074023/skin/images/600x600-back2.jpg', cover: 'https://tistory1.daumcdn.net/tistory/8074023/skin/images/WOW-30Ox25O-cover-left.png', arrowIcon: 'https://tistory1.daumcdn.net/tistory/8074023/skin/images/arrowbtn.png', dragDirection: 'left' }, { selector: '.sliding-banner-150', width: 320, height: 150, id: '940041', trackingCode: 'AF2787934', // 본인의 추적 코드로 대체 subId: '', tsource: '', background: 'https://tistory1.daumcdn.net/tistory/8074023/skin/images/640x300-back2.jpg', cover: 'https://tistory1.daumcdn.net/tistory/8074023/skin/images/WOW-32Ox15O-cover-left.png', arrowIcon: 'https://tistory1.daumcdn.net/tistory/8074023/skin/images/arrowbtn.png', dragDirection: 'left' }, { selector: '.sliding-banner-250', width: 300, height: 250, id: '940041', trackingCode: 'AF2787934', // 본인의 추적 코드로 대체 subId: '', tsource: '', background: 'https://tistory1.daumcdn.net/tistory/8074023/skin/images/600x500-back2.jpg', cover: 'https://tistory1.daumcdn.net/tistory/8074023/skin/images/WOW-30Ox25O-cover-left.png', arrowIcon: 'https://tistory1.daumcdn.net/tistory/8074023/skin/images/arrowbtn.png', dragDirection: 'left' }, { selector: '.sliding-banner-280', width: 336, height: 280, id: '940041', trackingCode: 'AF2787934', // 본인의 추적 코드로 대체 subId: '', tsource: '', background: 'https://tistory1.daumcdn.net/tistory/8074023/skin/images/600x500-back3.jpg', cover: 'https://tistory1.daumcdn.net/tistory/8074023/skin/images/WOW-30Ox25O-cover-right.png', arrowIcon: 'https://tistory1.daumcdn.net/tistory/8074023/skin/images/arrow-right.png', dragDirection: 'right' } ]; const coupangLink = 'https://link.coupang.com/a/c2PToW'; // 본인의 간편 링크로 대체 📍 function openLink(link) { if (newWindow) { window.open(link, '_blank'); } else { history.replaceState(null, null, window.location.href); window.location.href = link; } } function generateIframeURL(config) { return `https://ads-partners.coupang.com/widgets.html?id=${config.id}&template=carousel&trackingCode=${config.trackingCode}&subId=${encodeURIComponent(config.subId || '')}&width=${config.width}&height=${config.height}&tsource=${encodeURIComponent(config.tsource || '')}`; } function createBanner(config) { const iframeURL = generateIframeURL(config); const wrapper = document.createElement('div'); wrapper.innerHTML = `
`; return wrapper; } // trigger event update function setupDragEvents(dragTarget, animatedBanner, threshold, link, direction) { let startX = 0, diffX = 0, triggered = false, isDragging = false; function getClientX(e) { return e.type.includes('touch') ? e.touches[0].clientX : e.clientX; } function triggerOnce() { if (triggered) return; triggered = true; animatedBanner.style.transform = 'translateX(0)'; animatedBanner.classList.add('active'); openLink(link); } function startDrag(e) { if (e.type.startsWith('mouse') && e.button !== 0) return; isDragging = true; startX = getClientX(e); diffX = 0; triggered = false; animatedBanner.classList.remove('active'); e.preventDefault(); } function onDrag(e) { if (!isDragging) return; const currentX = getClientX(e); diffX = currentX - startX; if ((direction === 'left' && diffX < 0) || (direction === 'right' && diffX > 0)) { animatedBanner.style.transform = `translateX(${diffX}px)`; if (Math.abs(diffX) > threshold) { triggerOnce(); } e.preventDefault(); } } function endDrag() { if (!isDragging) return; isDragging = false; const dragRatio = Math.abs(diffX) / dragTarget.offsetWidth; if (Math.abs(diffX) < clickTolerance || ( dragRatio >= dragRatioThreshold && ((direction === 'left' && diffX < 0) || (direction === 'right' && diffX > 0)) )) { triggerOnce(); } else { animatedBanner.style.transform = 'translateX(0)'; animatedBanner.classList.add('active'); } diffX = 0; } dragTarget.addEventListener('mousedown', startDrag); dragTarget.addEventListener('mousemove', onDrag); dragTarget.addEventListener('mouseup', endDrag); dragTarget.addEventListener('mouseleave', endDrag); dragTarget.addEventListener('touchstart', startDrag, { passive: false }); dragTarget.addEventListener('touchmove', onDrag, { passive: false }); dragTarget.addEventListener('touchend', endDrag); } // end bannerConfigs.forEach(config => { const targets = document.querySelectorAll(config.selector); if (targets.length === 0) return; targets.forEach(target => { target.innerHTML = ''; const banner = createBanner(config); target.appendChild(banner); const customBox = banner.querySelector('.customBox'); const animatedBanner = banner.querySelector('.customBanner'); const threshold = config.width * dragSensitivity; setupDragEvents(customBox, animatedBanner, threshold, coupangLink, config.dragDirection); }); }); }, 100);

티스토리툴바