How to use JS to implement flying page special effects that can be used for page number replacement-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use JS to implement flying page special effects that can be used for page number replacement

php中世界最好的语言

May 28, 2018 pm 02:57 PM

javascript page number

This time I will show you how to use JS to implement flying page special effects that can be used for page number replacement, and use JS to implement flying page special effects that can be used for page number replacement. What are the precautions?The following is a practical case, let’s take a look take a look.

This effect uses a motion function encapsulated by itself; the cleverness of this effect is that it uses an array to store the position information of each li at the beginning, and then when the button (page number) is clicked, the li's The changes in width, height, position and transparency disappear one by one, and then appear upside down one after another; they can be matched with the page number to achieve the effect of page number replacement

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

Copy after login

Motion function 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);
}

Copy after login

The operation effect is as follows:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks ago By DDD

Two Point Museum: All Exhibits And Where To Find Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7369

Java Tutorial

1628

CakePHP Tutorial

1355

Laravel Tutorial

1266

PHP Tutorial

1215

Related knowledge

Why are word page numbers the same on every page? What should I do if the word page numbers are the same on every page? Mar 13, 2024 pm 09:34 PM

What’s the matter with the word page numbers being the same on every page? We all use document editing software in our daily work, but many users find that the page numbers on each page they set are the same when using the page number function. Let this site introduce it to users in detail. What should I do if the word page numbers are the same on every page? What should I do if the word page numbers are the same on every page? 1. Open Word, and then click the Insert option on the top menu bar. 2. Then click the page number and choose to set the page number format. 3. Then in the window that opens, select an "encoding" format. 4. Then check the "Start page number" option, enter 1, and click "OK"

How do PPT page numbers start from page 4 to 1? PPT page number customization tutorial Mar 13, 2024 pm 05:52 PM

If the PPT has many pages, you can add page numbers to the PPT to make it look more organized. So can PPT page numbers be customized? Can I set page numbers starting from a certain page in PPT? If you don’t know the specific operation, you can take a look at the tutorial method below. How to set the ppt numbering to start from the fourth page: 1. Click "Slide Numbering" under the "Insert" menu. Entering the header and footer settings page, we can see that the slide number is not checked by default. 2. Click to check "Slide Number", and then click "Apply to All" to complete inserting the number. 3. You can see the insertion in the picture below

How to set Word page numbers so that odd and even pages are different on the left and right? Mar 13, 2024 pm 06:13 PM

If you want to make the document look more personalized, you can set the Word page numbers to be different for odd and even pages. So how do you set the left and right page numbers for Word's odd and even pages to be different? Let’s take a look at the detailed tutorial below. If you don’t know how to operate it, just read on. Word setting method: 1. First, we click "Insert". 2. Then click "Footer". 3. Then click "Edit Footer". 4. Then click "Odd and Even Pages Are Different". 5. Then locate the footer of the odd-numbered page and click "Page Number". 6. Then we select the page style on the right.

Why is the word page number always the same as the previous page? Mar 13, 2024 pm 06:28 PM

When editing word, you will want to add page numbers to word to make it look more organized. However, after setting the page number, I found that the page number of each page of the document is the same. This problem is not uncommon. Let’s take a look at the detailed solution with the editor. Are all the Word page numbers exactly the same? 1. In the "Start" interface of Word, click "Page Number", click "Top of Page" in its drop-down menu bar, and select the ordinary number "2". 2. Then click "Page Number" on the page, and click "Set Page Number Format" in its drop-down menu bar&rdq

How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

See all articles