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 ...
随机推荐
- jq 插件写法
1.一次声明一个函数 $.fn.函数名 = function([options]){} $.fn.red=function(options){ var defaults = { 'color': 'r ...
- spring boot: @Entity @Repository一个简单的数据读存储读取
spring boot: @Entity @Repository一个简单的数据读存储读取 创建了一个实体类. 如何持久化呢?1.使用@Entity进行实体类的持久化操作,当JPA检测到我们的实体类当中 ...
- 一个或多个音频服务未运行 win7 错误1079:此服务的账户不同于运行于同一进程上的其他服务账户
一个或多个音频服务未运行 win7 错误1079:此服务的账户不同于运行于同一进程上的其他服务账户 启动任务管理器:右键计算机——管理——”服务和应用程序“选项——”服务“——找到“windows a ...
- English trip -- Review Unit 10 Leisure 休闲
Words dance exercise fish play basketball play cards swim cook play the guitar listen to music watch ...
- DBeaver
DBeaver简介: 无意中得知DBeaver这个工具,觉得特别神奇,对我们目前工作特别有用,所以特别惊喜.(有点土包子没见过世面...) 借用百度百科:DBeaver是一个通用的数据库管理工具和 S ...
- python-day8-赋值
# x=10 #链式赋值# a=b=c=d=e=f=10# print(a,b,c,d,e,f) #增量赋值 # x=10# y='a'# temp=x# x=y# y=temp# print(x,y ...
- 使用kubeadm安装Kubernetes v1.10
关于K8S: Kubernetes是Google开源的容器集群管理系统.它构建于docker技术之上,为容器化的应用提供资源调度.部署运行.服务发现.扩 容缩容等整一套功能,本质上可看作是基于容器技术 ...
- UA 列表
设备 系统 浏览器 User-Agent iPhone IOS QQ浏览器 Mozilla/5.0 (iPhone 84; CPU iPhone OS 10_3_3 like Mac OS X) Ap ...
- BlockingQueue-----多线程(一)
前言: 在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序带来极大的便 ...
- 新手也能学会本地调试微信,natapp 官网映射
本地调试微信的新手指引~ 照着配置,一定可以配置成功,实现本地调试微信,公司好几个同事按照我写的步骤,都独立配成功了. 1.首选在natapp注册一个账号,申请免费隧道或者购买隧道,我买了一个月9元的 ...