vue项目tween方法实现返回顶部的示例代码


Posted in Javascript onMarch 02, 2018

一、场景

tween.js是一款可生成平滑动画效果的js动画库

当你要实现一个返回顶部的功能时候你会怎么做,大部分人会使用document.body.scrollTop =0;这么写就实现了功能,

不过要更加的细腻一点我们不妨用tween的缓动来实现,看看效果如何吧。

之前我们写过tween的相关文章,这里不做介绍了。

二、代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style type="text/css">
      #app{width: 100%; height: 3000px;background: #CCCCCC;}
      .backTop{
        width: 1.5rem;
        height: 1.5rem;
        border: 1px solid #ff0000;
        position: fixed;
        right: 1rem;
        bottom: 2rem;
        border-radius: 50%;
        /*background: url(/static/imgs/backtop20180226.png) no-repeat 40%;*/
        background-size: 70% 100%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div @click="backTop()" class="backTop">Top</div>
    </div>
    
    <script type="text/javascript">
      var app = new Vue({
        el:"#app",
        data:{
          
        },
        methods:{
          backTop(){
//             * t: current time(当前时间);
//             * b: beginning value(初始值);
//             * c: change in value(变化量);
//             * d: duration(持续时间)。
            var Tween = {
              Linear: function(t, b, c, d) { //匀速运动,想要实现其他的效果可以使用tween的其他方法
                return c * t / d + b; 
              }
            }
            Math.tween = Tween;
            var t = 1;
            const b = document.documentElement.scrollTop;
            const c = 50;
            const d = 5;
            const setInt = setInterval(()=>{
              t--;
              console.log(t)
              if(document.documentElement.scrollTop == 0){clearInterval(setInt)}
              console.log(t);
              const backTop = Tween.Linear(t,b,c,d);
               console.log(backTop);
              document.documentElement.scrollTop = backTop;
            },20)
          }
        }
      })
    </script>
  </body>
</html>

三、requestAnimationFrame改写setInterval方法:

methods:{
      backTop(){
        var Tween = {
          Linear: function(t, b, c, d) { //匀速
            return c * t / d + b; 
          }
        }
        Math.tween = Tween;
        var t = 1;
        const b = document.body.scrollTop;
        const c = 1;
        const d = 1;
        var timer;
        timer= requestAnimationFrame(function fn(){
          if(document.body.scrollTop > 0){
            t--;
            console.log(t)
            console.log(t);
            const backTop = Tween.Linear(t,b,c,d);
             console.log(backTop);
            document.body.scrollTop = backTop;
            timer = requestAnimationFrame(fn);
          }else{
            cancelAnimationFrame(timer)
          }
        })
      }
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
jquery foreach使用示例
Sep 12 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
Vue2.0系列之过滤器的使用
Mar 01 #Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 #Javascript
vue.js 获取select中的value实例
Mar 01 #Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 #Javascript
在vue中封装可复用的组件方法
Mar 01 #Javascript
JavaScript判断日期时间差的实例代码
Mar 01 #Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 #Javascript
You might like
PHP中的float类型使用说明
2010/07/27 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
详解html-webpack-plugin用法全解
2018/01/22 Javascript
python中__call__方法示例分析
2014/10/11 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
python matlibplot绘制3D图形
2018/07/02 Python
python3 下载网络图片代码实例
2019/08/27 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
法律专业自我鉴定
2013/10/03 职场文书
什么是岗位职责
2013/11/12 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
学历公证书范本
2014/04/09 职场文书
档案信息化建设方案
2014/05/16 职场文书
运动会班级口号
2014/06/09 职场文书
村级四风对照检查材料
2014/08/24 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
先进典型事迹材料
2014/12/29 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android