一个简单的scrollTop动画的方法

var autoScrollTop = function (param) {
        var delay = param.scrollDom.height() * 20;
        param.dom.animate({
            "scrollTop": param.dom.offset().top - param.dom.height()
        }, delay, function () {
            param.dom.animate({
                "scrollTop": 0
            }, 0);
            Common.autoScrollTop(param);
        });
    }

  调用方法:

Common.autoScrollTop({
            "dom": $("#left_bottom_table"),
            "scrollDom": $("#left_bottom_table table")
        })

  欢迎提出意见及评论~~

转载于:https://www.cnblogs.com/sooooogiotto/p/6872815.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现一镜到底动画,可以使用Vue的过渡动画和监听滚动事件来实现。 首先,在Vue组件中,使用`<transition>`标签包裹需要做动画的元素,并设置`mode="out-in"`,表示在元素离开之前,新元素会插入并等待动画结束后再执行元素离开的动画。 然后,在`mounted`生命周期钩子中,监听`window`对象的`scroll`事件。在事件处理函数中,使用`window.scrollY`获取当前滚动的距离,并通过计算滚动距离与元素高度的比例来控制动画的进度,从而实现一镜到底的效果。 以下是一个简单的示例代码: ```vue <template> <div> <transition name="fade" mode="out-in"> <div v-show="show" class="content"> <!-- 内容 --> </div> </transition> </div> </template> <script> export default { data() { return { show: false, height: 0, scrollTop: 0 }; }, mounted() { this.height = this.$el.offsetHeight; window.addEventListener("scroll", this.handleScroll); }, destroyed() { window.removeEventListener("scroll", this.handleScroll); }, methods: { handleScroll() { this.scrollTop = window.scrollY; if (this.scrollTop / this.height > 0.9) { this.show = true; } else { this.show = false; } } } } </script> <style> .content { opacity: 0; transition: opacity 0.5s ease-in-out; } .fade-enter, .fade-leave-to { opacity: 0; } </style> ``` 在上面的代码中,`height`表示元素的高度,`scrollTop`表示当前滚动的距离,通过计算`scrollTop`与`height`的比例来控制元素的显示和隐藏。`handleScroll`方法监听`scroll`事件,并在滚动距离达到一定值时,设置`show`为`true`,触发过渡动画。过渡动画使用了Vue的内置过渡类名`fade-enter`和`fade-leave-to`,通过设置`opacity`来实现渐变效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值