javascript - 阿里云的这个效果是怎么出来的?
高洛峰
高洛峰 2017-04-11 12:59:27
[JavaScript讨论组]

阿里云页面轮播效果

首页轮播里有几帧是鼠标放上去移动,里面的图片也会跟着移动,这样的效果怎么写出来?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(3)
ringa_lee

就是监听鼠标的move事件,实时获取鼠标xy轴,减去一定的比例值,然后取反数值,设置素材的位置
http://gaoqiang19514.github.i...
链接都给你了,你不能进去看下源码吗?给你贴出来了

    //    视差效果
    $('#header').on('mousemove', function(event){
        var x              = event.pageX;
        var y              = event.pageY;
        var bgCentralityX  = $(window).width() / 2;    //    背景图的中心点
        var bgOffsetX      = (x - bgCentralityX) / 30;
        
        var imgCentralityX = $('.parallax__people').offset().left + ($('.parallax__people').width() / 2);
        var imgCentralityY = $('.header__container').height() / 2;
        
        var imgOffsetX     = (x - imgCentralityX) / 10;
        var imgOffsetY     = (y - imgCentralityY) / 10;

        $('.parallax__bg-img').css('left', -bgOffsetX);
        $('.parallax__layer').css({
            left: -imgOffsetX,
            top: -imgOffsetY
        });
    });
PHPz

做了一张雪碧图,js控制background-position实现的。
该图链接

巴扎黑

放了多张图组合成一张图.然后用transform

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

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