• 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)
      }
  • 相关阅读:
    CMLLVDS
    js获取url中的参数(解决中文乱码)
    解决跳转出现 No input file specified.
    ThinkPHP关联模型详解
    Thinkphp表单自动验证
    手机号登录注册
    JS实现每隔一段时间数量增加或减少
    文章或者观点说说等点赞功能实现(thinkphp)
    thinkphp整合Ueditor编辑器
    点击切换状态 类似开关按钮
  • 原文地址:https://www.cnblogs.com/brainworld/p/9132193.html
Copyright © 2020-2023  润新知