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 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
动态加载js、css的实例代码
May 26 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
如何编写jquery插件
Mar 29 jQuery
nuxt.js 缓存实践
Jun 25 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
JavaScript 比较时间大小的代码
2010/04/24 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
Html5 js实现手风琴效果
2020/04/17 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python中字符串与编码示例代码
2019/05/20 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
python实现登录与注册系统
2020/11/30 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
Ejb技术面试题
2015/04/29 面试题
大学毕业生通用自我评价
2014/01/05 职场文书
函授自我鉴定范文
2014/02/06 职场文书
集体生日活动方案
2014/08/18 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
医生见习报告范文
2014/11/03 职场文书
教师外出学习心得体会
2016/01/18 职场文书
初中信息技术教学反思
2016/02/16 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL