suchen

Heim  >  Artikel  >  Web-Frontend  >  Eine Fallstudie über JavaScript, HTML und CSS bei der Implementierung eines Floor-Hopping-Seitenlayouts

Eine Fallstudie über JavaScript, HTML und CSS bei der Implementierung eines Floor-Hopping-Seitenlayouts

黄舟
黄舟Original
2017-10-25 09:23:341588Durchsuche

Implementierungscode und Kommentare: 


<!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
  }
}

Zusammenfassung

Das obige ist der detaillierte Inhalt vonEine Fallstudie über JavaScript, HTML und CSS bei der Implementierung eines Floor-Hopping-Seitenlayouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie Strategien beim Angular-Routing wiederNächster Artikel：So verwenden Sie Strategien beim Angular-Routing wieder

In Verbindung stehende Artikel

Mehr sehen