H5+C3+JS는 바닥 점핑 특수 효과를 구현합니다.

php中世界最好的语言
풀어 주다: 2018-04-19 17:05:18
원래의
4801명이 탐색했습니다.

이번에는 바닥 점프 특수 효과를 구현하기 위해 H5+C3+JS를 가져오겠습니다. H5+C3+JS를 사용하여 바닥 점프 특수 효과를 구현하는 Notes는 무엇입니까? 바라보다.

rreee

  myScroll.js

<!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>
로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Echarts는 동적 색상 변경 히스토그램을 구현합니다

jquery는 모두 선택을 구현하고 단일 선택을 반전시킵니다.

jQuery는 배경색 그라데이션 애니메이션 효과를 작동합니다

위 내용은 H5+C3+JS는 바닥 점핑 특수 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿