如何使用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邮箱登陆入口在哪里

7469

CakePHP 教程

1376

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版

热门话题