recherche

Maison  >  Article  >  interface Web  >  Le HTML pur, le CSS et le Javascript réalisent une mise en page de haut en bas

Le HTML pur, le CSS et le Javascript réalisent une mise en page de haut en bas

小云云
小云云original
2018-01-03 11:21:322021parcourir

Cet article présente principalement du HTML+css+javascript pur pour réaliser une mise en page sautante. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Démonstration de l'effet d'implémentation :

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

Recommandations associées :

Compréhension de la mise en page en HTML

Six tutoriels d'introduction à la mise en page div+css et résumé des exemples d'utilisation

Introduction à l'apprentissage du front-end web : Les avantages du DIV+CSS pour la mise en page !

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!

JavaScript css html JS
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：Une brève analyse de la méthode d'implémentation de Vue.nextTickArticle suivant：Une brève analyse de la méthode d'implémentation de Vue.nextTick

Articles Liés

Voir plus