Explication détaillée de la fonction de défilement plein écran implémentée par JavaScript natif-js tutoriel-php.cn

Explication détaillée de la fonction de défilement plein écran implémentée par JavaScript natif

巴扎黑

Libérer： 2017-09-20 09:20:57

original

1637 Les gens l'ont consulté

Cet article présente principalement la fonction de défilement plein écran implémentée par javascript natif, impliquant des techniques d'implémentation liées à la réponse aux événements javascript et au fonctionnement dynamique des attributs des éléments de page.

Cet article décrit. l'implémentation du javascript natif avec des exemples de fonction de défilement plein écran. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Principe :

1. Calculez la hauteur et l'affichage actuels de l'écran du navigateur. à chaque fois que vous tournez la page La hauteur du contenu est la hauteur de l'écran

2. Surveillez l'événement de la molette de la souris et faites attention aux problèmes de compatibilité du navigateur de l'événement de la roue.

Sans plus attendre, passons directement au code

code 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>

Copier après la connexion

code 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;}

Copier après la connexion

code 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+&#39;px&#39;)},1000);
    //懒得写动画代码了，直接用了jquery，=。=
  }
</script>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!