이 글은 주로 JavaScript 이벤트 응답과 페이지 요소 속성의 동적 동작과 관련된 구현 기술을 포함하여 기본 JavaScript로 구현된 전체 화면 스크롤 기능을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
원리:
1. 페이지를 넘길 때마다 표시되는 콘텐츠의 높이를 계산합니다.
2. 휠 이벤트의 브라우저 호환성 문제.
더 이상 쓸데없는 소리는 하지 말고 바로 코드로 넘어가자
html 코드:
<p id="wrap"> <p id="main" style="top: 0;"> <p class="content num1"> <img src="https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg" width="100%" height="100%"> </p> <p class="content num2"> <img src="https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg" width="100%" height="100%"> </p> <p class="content num3"> <img src="https://www.bing.com/az/hprichbg/rb/GareSaintLazare_ZH-CN6611772290_1920x1080.jpg" width="100%" height="100%"> </p> <p class="content num4"> <img src="https://www.bing.com/az/hprichbg/rb/FriendshipSquare_ZH-CN8820626148_1920x1080.jpg" width="100%" height="100%"> </p> </p> </p>
css 코드:
#wrap{overflow: hidden;width: 100%;} #main{top: 0;position: relative;} .content{width: 100%;margin: 0;height: 100%;} .num1{background: #e8e8e8;} .num2{background: pink;} .num3{background: yellow;} .num4{background: orange;}
js 코드 :
<script type="text/javascript"> var wrap = document.getElementById("wrap"); var pHeight = window.innerHeight; wrap.style.height = pHeight + "px"; var content = $(".content");//懒得写获取类的原生js代码了,直接用了jquery,=。= content.height(pHeight); var startTime = 0, //开始翻屏时间 endTime = 0, now = 0; if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){ //for firefox; document.addEventListener("DOMMouseScroll",scrollFun,false); } else if (document.addEventListener) { document.addEventListener("mousewheel",scrollFun,false); } else if (document.attachEvent) { document.attachEvent("onmousewheel",scrollFun); } else{ document.onmousewheel = scrollFun; } //滚动事件处理函数 function scrollFun(event){ startTime = new Date().getTime(); var delta = event.detail || (-event.wheelDelta); if ((endTime - startTime) < -1000) { //1秒内执行一次翻页 if (delta > 0 && parseInt(main.style.top) > -pHeight * ( content.length - 1)) { //向下翻页 now += pHeight ; turnPage(now); } if (delta < 0 && parseInt(main.style.top) < 0) { //向上翻页 now -= pHeight ; turnPage(now); } endTime = new Date().getTime(); } else{ event.preventDefault(); } } //翻页函数 function turnPage(now){ $("#main").animate({top:(-now+'px')},1000); //懒得写动画代码了,直接用了jquery,=。= } </script>
관련 권장 사항:
jQuery 플러그인 fullPage.js를 사용하면 전체 화면 스크롤 효과를 얻을 수 있습니다.
jquery_javascript 기술을 기반으로 전체 화면 스크롤 효과를 얻을 수 있습니다.
jquery를 사용하면 전체 화면 스크롤 효과를 얻을 수 있습니다_jquery
위 내용은 JavaScript는 전체 화면 스크롤 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!