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 ...
随机推荐
- rem的计算
(function (doc, win) { console.log("dpr:"+win.devicePixelRatio); var docEle = doc.document ...
- Lua面向对象 --- 多态
多态,简单的理解就是事物的多种形态.专业的术语说就是:同一个实现接口,使用不同的实例而执行不同的操作. 工程结构: BaseRoom.lua: BaseRoom = {} function BaseR ...
- (GoRails )使用Vue.js制作拖拉list功能(v5-8)
视频5 改进视觉效果,让list看起来更舒服.新增横向滚动功能. 参考我的trello:https://trello.com/b/BYvCBpyZ/%E6%AF%8F%E6%97%A5%E8%AE%B ...
- Confluence 6 设置公共访问备注
你不能为匿名用户赋予空间管理员或者限制权限. 你可以让用户自行注册你的 Confluence 站点,同时也可以选择其他的用户注册选项,比如邀请用户注册等.请查看:Add and Invite User ...
- OC Copy和Property
- OC 复合
在Objective-C中复合是通过包含作为实例变量的对象指针实现的 严格来说,只有对象间的组合才叫复合 --------------------Car.h---------------------- ...
- python读写csv时中文乱码问题解决办法
https://www.cnblogs.com/shengulong/p/7097869.html 参考1 参考2 参考3 CSV是英文Comma Separate Values(逗号分隔值)的缩写, ...
- Python中变量、赋值、浅拷贝、深拷贝
https://www.cnblogs.com/LetMe/p/6724555.html 在理解浅拷贝和深拷贝之前,首先要理解学习一下变量在Python中是怎样存储的: 变量的类型是分值引用与地址引用 ...
- jsp jsp的基本语法
jsp模板元素 jsp页面中的HTML 内容称为JSP模板元素 jsp模板元素定义了网页的基本骨架,即定义了页面结构和外观 jsp表达式 jsp脚本表达式用于将程序数据输出到客户端 语法& ...
- 合法的MAC地址
以太网的地址为48位,由ieee统一分配给网卡制造商,每个网卡的地址都必须是全球唯一的.共6个字节的长度 字节 5 4 3 2 1 0 位 47..40 39..32 31..24 23..16 1 ...