纯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 相关文章推荐
JS获取鼠标坐标的实例方法
Jul 18 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
js中对象和面向对象与Json介绍
Jan 21 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
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python进行两个表格对比的方法
2018/06/27 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
python实现人脸签到系统
2020/04/13 Python
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
入党积极分子评语
2014/05/04 职场文书
就职演讲稿范文
2014/05/19 职场文书
医学求职信
2014/05/28 职场文书
golang中的空slice案例
2021/04/27 Golang
Python实现天气查询软件
2021/06/07 Python
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
Javascript设计模式之原型模式详细
2021/10/05 Javascript