纯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 相关文章推荐
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 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
PHP精确计算功能示例
2016/11/29 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
php实现简单四则运算器
2020/11/29 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
JS加ASP二级域名转向的代码
2007/05/17 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
浅析Python编写函数装饰器
2016/03/18 Python
python Pygame的具体使用讲解
2017/11/03 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
python怎么删除缓存文件
2020/07/19 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
有针对性的求职自荐信
2013/11/14 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
大学生励志演讲稿
2014/04/25 职场文书
商铺门面租房协议书
2014/10/21 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
幼儿园见习总结
2015/06/23 职场文书
公司规章制度范本
2015/08/03 职场文书
餐厅开业活动方案
2019/07/08 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js