纯JS实现可用于页码更换的飞页特效示例

更新时间：2018年05月21日 09:10:31 作者：Jason齐齐

这篇文章主要介绍了纯JS实现可用于页码更换的飞页特效,涉及javascript结合时间函数的数学运算与页面元素属性动态修改相关操作技巧,需要的朋友可以参考下

本文实例讲述了纯JS实现可用于页码更换的飞页特效。分享给大家供大家参考，具体如下：

这个效果使用了自己封装的一个运动函数；这个效果的巧妙之处在于，在开始用数组存放了每个li的位置信息，然后在点击按钮（页码）的时候让li的宽高位置和透明度发生运动的改变一个一个的消失，然后在消失结束之后，再一个个倒着出现；可以和页码进行匹配，从而实现页码更换的效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net 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>
  <div class="header">飞页效果</div>
  <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);
}

运行效果如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

ES6中Array.includes()函数的用法
这篇文章主要介绍了ES6中Array.includes()函数的用法,需要的朋友可以参考下
2017-09-09
JavaScript中的数据类型有哪些
本文介绍了JavaScript中的八种数据类型：Undefined、Null、Boolean、Number、String、Symbol、BigInt和Object,基础数据类型存储在栈内存中,而引用数据类型存储在堆内存中,每种数据类型都有其特定的用途和特性
2025-01-01
微信小程序自定义状态栏
这篇文章主要为大家详细介绍了微信小程序自定义状态栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
js 第二代身份证号码的验证机制代码
在盛大某网站注册的时候，身份证必填，但我又不想填真实身份证号码，于是随便编了串自认为合法的身份证号码，但是却马上被提示号码错误
2011-05-05
用javascript实现放大镜效果
这篇文章主要为大家详细介绍了用javascript实现放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
这篇文章主要介绍了js使用文档就绪函数动态改变页面内容,结合实例形式分析了JavaScript使用innerHTML、innerText函数动态操作页面元素相关使用技巧,需要的朋友可以参考下
2019-11-11
微信小程序在{{ }}中直接使用函数的方法示例
最近在学习微信小程序,在学习中遇到了一些问题,所以进行了总结了下,这篇文章主要给大家介绍了关于微信小程序在{{ }}中直接使用函数的相关资料,需要的朋友可以参考下
2021-06-06
将CKfinder整合进CKEditor3.0的新方法
最新发布的CKFinder 1.4版已经提供了对CKEditor3.0的支持
2010-01-01
JS实现页面进入和返回定位到具体位置
其实浏览器也自带了返回的功能，也就是说，自带了返回定位的功能，返回定位到具体位置有两种方法，下面通过场景分析给大家详细讲解，需要的的朋友参考下
2016-12-12
JS回调函数简单易懂的入门实例分析
这篇文章主要介绍了JS回调函数,结合简单实例形式分析了javascript回调函数的概念、原理、相关操作技巧与使用注意事项,需要的朋友可以参考下
2019-09-09

纯JS实现可用于页码更换的飞页特效示例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具