纯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 相关文章推荐
基于jquery的给文章加入关键字链接
Oct 26 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
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
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php+mysql数据库查询实例
2015/01/21 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
Python多线程学习资料
2012/12/19 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
详解rem 适配布局
2018/10/31 HTML / CSS
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
行政专员求职信范文
2014/05/03 职场文书
职代会闭幕词
2015/01/28 职场文书
《海上日出》教学反思
2016/02/23 职场文书