Maison > Article > interface Web > Une étude de cas de JavaScript, HTML et CSS implémentant une mise en page sautante

Une étude de cas de JavaScript, HTML et CSS implémentant une mise en page sautante

黄舟original: 2017-10-25 09:23:341586parcourir

Code d'implémentation et commentaires :

<!DOCTYPE html>
<html>
<head>
  <title>楼层跳跃式的页面布局</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body, html{
      height: 100%;
    }
    ul{
      list-style: none;
      height: 100%;
    }
    ul li{
      height: 100%;
    }
    ol{
      list-style: none;
      position: fixed;
      top:200px;
      left: 50px;
    }
    ol li{
      width: 50px;
      height: 50px;
      border: 1px solid #000;
      text-align: center;
      line-height: 50px;
      margin-top: -1px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<ul>
  <li>第一区域</li>
  <li>第二区域</li>
  <li>第三区域</li>
  <li>第四区域</li>
</ul>
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>
<script type="text/javascript" src="myScroll.js"></script>
<script type="text/javascript">
  // 点击ol的li，屏幕滑动到对应的ul的li
  // 利用window.scrollTo()；缓动动画实现
  var ul = document.getElementsByTagName("ul")[0];
  var ol = document.getElementsByTagName("ol")[0];
  var ulLiArr = ul.children;
  var olLiArr = ol.children;
  var target = 0;
  var leader = 0;
  var timer = null;
  // 1. 指定ul和ol中li的背景色，对应li的背景色相同
  var arrColor = ["green","orange","yellow","red","gold"];
  // 利用for循环给两个数组中的元素上色
  for(var i=0; i<arrColor.length; i++){
    ulLiArr[i].style.backgroundColor = arrColor[i];
    olLiArr[i].style.backgroundColor = arrColor[i];
    // 属性绑定索引值
    olLiArr[i].index = i;
    // 循环绑定，为每一个li绑定点击事件
    olLiArr[i].onclick =function(){
      // 获取目标位置
      target = ulLiArr[this.index].offsetTop;
      clearInterval(timer);
      // 利用缓动动画原理实现屏幕滑动
      timer = setInterval(function(){
        // (1).获取步长
        var step = (target-leader)/10;
        // (2).二次处理步长
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // (3).屏幕滑动
        leader = leader + step;
        window.scrollTo(0, leader);
        // (4).清除定时器
        if(Math.abs(target-leader) <= Math.abs(step)){
          window.scrollTo(0, target);
          clearInterval(timer);
        }
      }, 25);
    }
    // 用scroll事件模拟盒子距离最顶端的距离
    window.onscroll = function(){
      // 每次屏幕滑动，把屏幕卷去的值赋给leader，模拟获取显示区域距离顶部的距离
      leader = scroll().top;
    }
  }
</script>
</body>
</html>

myScroll.js

function scroll() { 
  // 开始封装自己的scrollTop
  if(window.pageYOffset !== undefined) { 
    // ie9+ 高版本浏览器
    // 因为 window.pageYOffset 默认的是0,所以需要判断
    return {
      left: window.pageXOffset,
      top: window.pageYOffset
    }
  }
  else if(document.compatMode === "CSS1Compat") {
    // 标准浏览器,来判断有没有声明DTD
    return {
      left: document.documentElement.scrollLeft,
      top: document.documentElement.scrollTop
    }
  }
  return {
    // 未声明 DTD
    left: document.body.scrollLeft,
    top: document.body.scrollTop
  }
}

Résumé

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment réutiliser les stratégies dans le routage angulaireArticle suivant：Comment réutiliser les stratégies dans le routage angulaire

Articles Liés

Voir plus