如何使用JS實作可用於頁碼更換飛頁特效-js教程-PHP中文網

首頁

web前端

js教程

如何使用JS實作可用於頁碼更換飛頁特效

php中世界最好的语言

May 28, 2018 pm 02:57 PM

javascript 頁碼

這次帶給大家如何使用JS實作可用於頁碼更換飛頁特效，使用JS實作可用於頁碼更換飛頁特效的注意事項有哪些，以下就是實戰案例，一起來看一下。

這個效果使用了自己封裝的一個運動函數；這個效果的巧妙之處在於，在開始用數組存放了每個li的位置信息，然後在點擊按鈕（頁碼）的時候讓li的寬高位置和透明度發生運動的改變一個一個的消失，然後在消失結束之後，再一個個倒著出現；可以和頁碼進行匹配，從而實現頁碼更換的效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> JS飞入效果</title>
  <link rel="stylesheet" href="stylesheets/base.css" rel="external nofollow" >
  <style>
    body{
      background:#000;
    }
    .header{
      width: 100%;
      height: 40px;
      background:#fff;
      font:bold 30px/40px '微软雅黑';
      text-align:center;
    }
    input{
      background:#fff;
      margin-top:5px;
      width: 50px;
      height: 20px;
      font:bold 12px/20px '微软雅黑';
    }
    ul{
      width: 360px;
      height: 360px;
      margin:50px auto;
    }
    ul li{
      width: 100px;
      height: 100px;
      background:skyblue;
      float:left;
      margin:5px;
    }
  </style>
  <script src="move.js"></script>
  <script>
    window.onload=function(){
      var oBtn=document.getElementById('btn1');
      var oUl=document.getElementsByTagName('ul')[0];
      var aLi=oUl.children;
      //用数组来存放没个li的位置
      var arr=[];
      //存位置
      for(var i=0;i<aLi.length;i++) {
        arr[i] = {
        left:aLi[i].offsetLeft,
        top:aLi[i].offsetTop
        };
      }
      //给目前的li定位
      for(var i=0;i<arr.length;i++){
        aLi[i].style.position='absolute';
        aLi[i].style.left=arr[i].left+'px';
        aLi[i].style.top=arr[i].top+'px';
        aLi[i].style.margin=0;
      }
      //当点击的时候开定时器，让li一个一个的走
      var iNow=0;
      var timer=null;
      var bReady=false;
      oBtn.onclick=function(){
        if(bReady){return;}
        bReady=true;
        timer=setInterval(function(){
          move(aLi[iNow],{left:0,top:0,height:0,width:0,opacity:0},{'duration':200,'complete':function(){
            if(iNow==arr.length-1){
              clearInterval(timer);
              back();
              bReady=false;
            }
            iNow++;
          }});
        },220);
      };
      function back(){
        timer=setInterval(function(){
          iNow--;
          move(aLi[iNow],{left:arr[iNow].left,top:arr[iNow].top,height:100,width:100,opacity:1},{'duration':200,'complete':function(){
            if(iNow==0){
              clearInterval(timer);
            }
          }});
        },220);
      }
    };
  </script>
</head>
<body>
  <p class="header">飞页效果</p>
  <input type="button" value="走你" id="btn1">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

登入後複製

運動函數move. js：

/**
 * Created by Jason on 2016/11/7.
 */
function getStyle(obj,sName){
  return (obj.currentStyle || getComputedStyle(obj,false))[sName];
}
function move(obj,json,options){
  var options=options || {};
  var duration=options.duration || 1000;
  var easing=options.easing || 'linear';
  var start={};
  var dis={};
  for(name in json){
    start[name]=parseFloat(getStyle(obj,name));
    dis[name]=json[name]-start[name];
  }
  //start {width:50,} dis {width:150}
  //console.log(start,dis);
  var count=Math.floor(duration/30);
  var n=0;
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
    n++;
    for(name in json){
      switch (easing){
        case 'linear':
          var a=n/count;
          var cur=start[name]+dis[name]*a;
          break;
        case 'ease-in':
          var a=n/count;
          var cur=start[name]+dis[name]*a*a*a;
          break;
        case 'ease-out':
          var a=1-n/count;
          var cur=start[name]+dis[name]*(1-a*a*a);
          break;
      }
      if(name=='opacity'){
        obj.style.opacity=cur;
      }else{
        obj.style[name]=cur+'px';
      }
    }
    if(n==count){
      clearInterval(obj.timer);
      options.complete && options.complete();
    }
  },30);
}

登入後複製

運行效果如下：

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7470

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

word頁碼每頁都一樣怎麼回事？ word頁碼每一頁都一樣怎麼辦？ Mar 13, 2024 pm 09:34 PM

　　word頁碼每頁都一樣怎麼回事？我們在日常辦公中都會使用到文件編輯軟體，可也有不少的用戶們在使用頁碼功能的時候發現設定的每頁的頁碼都是一樣的，下面就讓本站來為用戶們來仔細的介紹一下word頁碼每一頁都一樣怎麼辦吧。　　word頁碼每一頁都一樣怎麼辦　　1、打開Word，然後點擊頂部選單列的插入選項。　　2、接著點選頁碼，選擇設定頁碼格式。　　3、之後在開啟的視窗中，選擇一種「編碼」格式。　　4、然後勾選「起始頁碼」選項，並且輸入1，點選「確定

怎麼設定Word頁碼奇偶頁左右不同？ Mar 13, 2024 pm 06:13 PM

　　想要讓文件看起來更有個人化，可以設定Word頁碼奇偶頁不同，那麼Word奇偶頁頁碼左右不同要如何設定呢？下面就來看看詳細教學，如果你也不清楚怎麼操作，就接下來去看看吧。　　Word設定方法：　　1、首先我們點選「插入」。　　2、然後點選「頁尾」。　　3、隨後點選「編輯頁尾」。　　4、接著點擊「奇偶頁不同」。　　5、然後定位到奇數頁頁腳，點選「頁碼」。　　6、隨後我們選擇靠右的頁面樣式。

PPT頁碼怎麼從第4頁開始為1？ PPT頁碼自訂教程 Mar 13, 2024 pm 05:52 PM

　　如果PPT有很多頁，可以為PPT加上頁碼，看起來更有有條理。那麼PPT可以自訂頁碼嗎？ PPT可以從某頁開始設定頁碼嗎？如果你也不清楚具體的操作，可以看看下面的教學方法。　　ppt設定編號從第四頁開始的方法：　　1、點選「插入」選單下的「幻燈片編號」。　　進入頁首頁腳設定頁面，我們可以看到投影片編號預設是沒有勾選的。　　2、點選勾選“投影片編號”，然後點選“全部套用”完成插入編號。　　3、下圖中可以看到插入

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

word頁碼為什麼總是跟上一頁一樣? Mar 13, 2024 pm 06:28 PM

　　在編輯word時，會想要為word加入頁碼，看起來更有條理。但是設定頁碼後發現文件每一頁的頁碼都是一樣的，這個問題並不少見，下面就和小編一起來看看詳細的解決辦法吧。　　Word頁碼全都是一模一樣？　　1、在Word的“開始”介面中，點擊“頁碼”在其下拉選單列中點擊“頁面頂部”，選擇普通數字“2”。　　2、接著點擊頁面中的“頁碼”，在其下拉選單欄中點擊“設定頁碼格式&rdq

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

See all articles

如何使用JS實作可用於頁碼更換飛頁特效

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題