javascript 匀速运动实现侧边栏分享效果

wind3110991 发布于2019-08-23 11:34 / 2934人阅读

摘要：原理采用对象距离左边的距离加固定速度。实现侧边栏分享效果用运动做一个侧边栏分享分享到当我们写好一段代码的时候，我们应该进行测试优化。实现侧边栏分享效果简化速度参数用运动做一个侧边栏分享分享到

原理

采用offsetLeft（对象距离左边的距离）加固定速度。

采用定时器setInterval和clearInterval

根据当前位置到目标位置是正值还是负值决定运行的速度为正值还是负值。

实现侧边栏分享效果



  
    用运动做一个侧边栏分享
    
    
  
  
    
      分享到

当我们写好一段代码的时候，我们应该进行测试优化。测试无兼容问题，封装后的移动函数有两个参数，这个时候，我们考虑参数是否可以简化。
比如我们打出租车，我们可以告诉司机目的地，但是我们不必告诉司机以多少速度到目的地，所以，我们可以简化参数为一个参数。具体代码如下。

实现侧边栏分享效果——简化速度参数



  
    用运动做一个侧边栏分享
    
    
  
  
    
      分享到

GPU云服务器云服务器动态侧边栏显示隐藏侧边栏 html侧边栏 jquery侧边栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97140.html

[ 好文分享 ] CSS布局终极方案之--圣杯布局（兼容IE6+，现代浏览器）

摘要：圣杯布局很好很巧妙的布局方式，每次都要翻看一下，干脆转过来转自最终效果左侧栏固定宽度，右侧自适应主内容栏自适应宽度侧边栏固定宽度右侧栏固定宽度，左侧自适应主内容栏自适应宽度侧边栏固定宽度左中右三栏圣杯布局--很好很巧妙的布局方式，每次都要翻看一下，干脆转过来转自：http://my.oschina.net/jsan/blog/368543 最终效果： showImg(https:/...

qujian 2019-08-28 18:14 评论0 收藏0
Django搭建个人博客：回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

摘要：本章集中介绍四个重要的小功能回到顶部浮动按钮矢量图标页脚沉底和粘性侧边栏。因为我们想在全站都拥有这个按钮，所以将刚写好的模块引用到中在后面引入注意模块用到了，因此要在后面引入。本章集中介绍四个重要的小功能：回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏。这几个功能与Django基本没啥关系，更多的是前端知识，但是对博客网站都很重要，问的读者也比较多，因此也集中讲一下好了。回到顶...

lovXin 2019-07-31 10:17 评论0 收藏0
JavaScript完美运动框架的进阶之旅

摘要：运动框架动起来进行运动的节点定时器你没看错，就是那么简单。直接在定时器内部，判断到达目标值，清除定时器就行拉运动框架运动终止进行运动的节点运动终止条件。转自个人博客三省吾身丶丶原来是JS动画效果，但是我会过头再看的时候，发现太粗略了，于是重新写了一篇。喜欢别只收藏啊，点个推荐，大兄弟^ ^！运动框架的实现思路运动，其实就是在一段时间内改变left、right、width、hei...

Pines_Cheng 2019-08-21 10:46 评论0 收藏0
从今天开始，拿起VuePress打造属于自己的专属博客

摘要：故九万里，则风斯在下矣，而后乃今培风背负青天，而莫之夭阏者，而后乃今将图南。这里是文件的内容部分最后更新时间最后更新时间默认不开启，它是基于提交的时间戳，所以我们的静态站点是需要通过的仓库进行管理的，并且它是按的时间来计算的。VuePress(0.x版本) 本blog配套了一个基于 VuePress 的一个简单的配置案例，此配置案例包含了本blog绝大部分配置案例，更多详情请移步这里VueP...

dantezhao 2019-05-22 17:59 评论0 收藏0
干货--手把手撸vue移动UI框架：侧边菜单

摘要：最后提醒下，代码中使用而非的原因是为了启动移动端手机的动画加速，提升动画流畅度。前言最近面试发现很多前端程序员都从来没有写过插件的经验，基本上都是网上百度。所以打算写一系列文章，手把手的教一些没有写过组件的兄弟们如何去写插件。本系列文章都基于VUE，核心内容都一样，会了之后大家可以快速的改写成react、angular或者是小程序等组件。这篇文章是第一篇，写的是一个类似QQ的侧边菜...

bergwhite 2019-08-22 15:11 评论0 收藏0