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


Posted in Javascript onMay 21, 2018

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 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);
}

运行效果如下:

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

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

Javascript 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
document.getElementById介绍
Sep 13 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
jquery图形密码实现方法
Mar 11 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
JS实现的文件拖拽上传功能示例
May 21 #Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 #Javascript
Vue二次封装axios为插件使用详解
May 21 #Javascript
详解vue的diff算法原理
May 20 #Javascript
详解使用vue-admin-template的优化历程
May 20 #Javascript
vuex进阶知识点巩固
May 20 #Javascript
简单的三步vuex入门
May 20 #Javascript
You might like
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP中的类-什么叫类
2006/11/20 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
python3调用R的示例代码
2018/02/23 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
在Python中COM口的调用方法
2019/07/03 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
python如何提升爬虫效率
2020/09/27 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
建设投标担保书
2014/05/13 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
阿凡达观后感
2015/06/10 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
详解Redis主从复制实践
2021/05/19 Redis
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python