scroll滚动动画(js/ts)
//(蓝色this部分为dom)
scrollToLeft(option?: {
duration?: number,
direction?: number
}) {
let direction = option.direction || 1
let animDuration = option.duration || 300
let listWidth = this.dateList.scrollWidth,//list总的scroll宽度
scrollItemWidth = listWidth / this.dateList.length;//每一个item宽度
let left = this.scrollList.scrollLeft,//滚动条scrollLeft
offsetLeft = left + scrollItemWidth * direction; let targetLeft;
if (offsetLeft < 0) {//超过最左边边界
targetLeft = 0
} else if (offsetLeft > (listWidth - this.dateList.offsetWidth)) {//超过最右边边界
targetLeft = listWidth - this.dateList.offsetWidth
} else {
targetLeft = offsetLeft
} let scrollIntercal = setInterval(() => {
if (option.direction < 0) {
if (this.scrollList.scrollLeft > targetLeft) {
this.scrollList.scrollLeft += (scrollItemWidth / (animDuration / 15)) * direction
} else {
clearInterval(scrollIntercal)
}
} else {
if (this.scrollList.scrollLeft < targetLeft) {
this.scrollList.scrollLeft += (scrollItemWidth / (animDuration / 15)) * direction
} else {
clearInterval(scrollIntercal)
}
}
}, 15)
}
scroll滚动动画(js/ts)的更多相关文章
- JS 实现无缝滚动动画原理(初学者入)
这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...
- wow.js+animate.css——有趣的页面滚动动画
今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...
- js中scroll滚动相关
js中scroll滚动相关 scroll,滚动,一般讨论的是网页整体与浏览器之间的关系. 一.元素相关 属性/方法 解释 element.scrollHeight 返回元素的整体高度. element ...
- 使用IntersectionObserver制作滚动动画以及其他记录
前言 最近在重做公司项目的主页,正好新来了个UI,整个都重新设计了一下,动画还挺多的.我之前没有怎么玩过这些,踩了挺多坑,最后找到了目前而言最合适的方法,现在做一个记录. 需要把原来的主页从项目中抽出 ...
- 推荐几款制作网页滚动动画的 JavaScript 库
这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...
- ScrollMe – 在网页中加入各种滚动动画效果
ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...
- 微信小程序滚动动画,点击事件及评分星星制作!
前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...
- 超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)
超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <tem ...
- 利用CSS实现带相同间隔地无缝滚动动画
说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...
随机推荐
- URAL 1029 Ministry
URAL 1029 思路: dp+记录路径 状态:dp[i][j]表示到(i,j)这个位置为止的最少花费 初始状态:dp[1][i]=a[1][i](1<=i<=m) 状态转移:dp[i] ...
- PHP标准库SPL
SPL是Standard PHP Library(PHP标准库)的缩写.用来解决典型(常见)问题(common problems)的一组接口与类的集合 典型问题(common problems) - ...
- LeetCode--204--计数质数
问题描述: 统计所有小于非负整数 n 的质数的数量. 示例: 输入: 10 输出: 4 解释: 小于 10 的质数一共有 4 个, 它们是 2, 3, 5, 7 . 方法1:经典的判断是否为质数遍历( ...
- LeetCode--125--验证回文串
问题描述: 好 times out: class Solution(object): def isPalindrome(self, s): """ :type s: st ...
- 20170528xlVBA凑数一例
Public Sub MakeUp() Dim Sht As Worksheet Set Sht = ThisWorkbook.Worksheets("设置") Dim Total ...
- 使用erlang实现简单的二进制通信协议
最近实现的一种简单的协议以及工具,主要用于客户端服务端通讯传输二进制数据时,协议的解包与封包,具体如下:首先定义协议的格式,主要由三部分组成: 数据长度(数据部分长度+协议号长度):4个 ...
- 『PyTorch』第七弹_nn.Module扩展层
有下面代码可以看出torch层函数(nn.Module)用法,使用超参数实例化层函数类(常位于网络class的__init__中),而网络class实际上就是一个高级的递归的nn.Module的cla ...
- 『科学计算_理论』PCA主成分分析
数据降维 为了说明什么是数据的主成分,先从数据降维说起.数据降维是怎么回事儿?假设三维空间中有一系列点,这些点分布在一个过原点的斜面上,如果你用自然坐标系x,y,z这三个轴来表示这组数据的话,需要使用 ...
- bzoj2242: [SDOI2011]计算器 BSGS+exgcd
你被要求设计一个计算器完成以下三项任务: 1.给定y,z,p,计算Y^Z Mod P 的值:(快速幂) 2.给定y,z,p,计算满足xy≡ Z ( mod P )的最小非负整数:(exgcd) 3.给 ...
- mysql日期查询大全
-- 查询昨日一整天的数据 DAY) ,'%Y-%m-%d 23:59:59') AS '昨日结束时间' -- 查询今日开始到当前时间的数据 DAY) ,'%Y-%m-%d %H:%i:%s') AS ...