javascript - scrollTop绑定的动画在手机上不能流畅执行。
PHP中文网
PHP中文网 2017-04-11 12:13:08
[JavaScript讨论组]

要做的事就是给一个顶部banner执行下滑的时候缩放的动画、思路是通过获取scrollTop的值、来执行缩放。

道理是这样,chrome模拟也是正常的,但是放在手机上后,就出现了滑动过程中不能执行缩放,得滑动停止之后,图片突然缩放到指定大小。

有没有什么好的插件,或者是不是得用touchmove?

    $(function(){
    var introSection = $('#cd-intro-background'),
        scaleSpeed = 1
    
    triggerAnimation();
    $(window).on('resize', function(){
        triggerAnimation();
    });

    function triggerAnimation(){
        $(window).scroll(function(){
            window.requestAnimationFrame(animateIntro);
        });
    }

    function animateIntro () {
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;        
        var scrollPercentage = (scrollTop/1000).toFixed(5),
            scaleValue = 1 - scrollPercentage*scaleSpeed;    
            if(scaleValue >= 0.5) {
                introSection.css({
                '-moz-transform': 'scale(' + scaleValue + ') ',
                '-webkit-transform': 'scale(' + scaleValue + ') ',
                '-ms-transform': 'scale(' + scaleValue + ') ',
                '-o-transform': 'scale(' + scaleValue + ') ',
                'transform': 'scale(' + scaleValue + ') '
                });
            }else{
                 introSection.css({
                '-moz-transform': 'scale(0.5) ',
                '-webkit-transform': 'scale(0.5) ',
                '-ms-transform': 'scale(0.5) ',
                '-o-transform': 'scale(0.5) ',
                'transform': 'scale(0.5) '
                })
            }
    }
});
PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号