扫码关注官方订阅号
阿里云页面轮播效果
首页轮播里有几帧是鼠标放上去移动,里面的图片也会跟着移动,这样的效果怎么写出来?
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
就是监听鼠标的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 }); });
做了一张雪碧图,js控制background-position实现的。该图链接
js
background-position
放了多张图组合成一张图.然后用transform
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
就是监听鼠标的move事件,实时获取鼠标xy轴,减去一定的比例值,然后取反数值,设置素材的位置
http://gaoqiang19514.github.i...
链接都给你了,你不能进去看下源码吗?给你贴出来了
做了一张雪碧图,
js控制background-position实现的。该图链接
放了多张图组合成一张图.然后用transform