本文介绍如何通过两个按钮控制元素的鼠标跟随视差动画：点击按钮1启动mousemove事件并应用tweenmax视差效果，点击按钮2立即停用事件并平滑还原元素至原始位置。
本文介绍如何通过两个按钮控制元素的鼠标跟随视差动画：点击按钮1启动mousemove事件并应用tweenmax视差效果，点击按钮2立即停用事件并平滑还原元素至原始位置。
在网页交互设计中，动态视差效果（如元素随鼠标移动轻微偏移）能显著提升视觉体验，但必须支持灵活启停——尤其当用户需要切换模式或回归静态布局时。本教程提供一个轻量、可靠且面向初学者的 jQuery + TweenMax 解决方案，兼容 jQuery 1.11.0，并避免常见陷阱（如事件未解绑、位置突变、重复绑定等）。
✅ 核心思路：状态控制 + 事件解绑 + 平滑重置
我们不依赖 unbind() 或嵌套 off() 这类易出错的方式，而是采用三重保障机制：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 使用布尔变量 isMousemoveActive 显式标记动画状态；
- 在 mousemove 回调中加条件判断，避免无效执行；
- 点击“停止按钮”时，先关闭状态、再解绑事件、最后调用 TweenMax.to(..., {x: 0, y: 0}) 平滑归位 —— 这是解决“卡在中途位置”问题的关键。
? 完整可运行代码（含注释）
// 初始化状态标志
var isMousemoveActive = false;
// 【重置函数】将 .d 和 .bg 平滑动画回原点 (x=0, y=0)
function resetPositions() {
TweenMax.to(".d, .bg", 1, {
x: 0,
y: 0,
ease: Power2.easeOut // 可选：添加缓动让归位更自然
});
}
// 【启动按钮】绑定 mousemove 并激活状态
$('.button1').click(function() {
isMousemoveActive = true;
// 注意：此处使用 .off().on() 组合，确保仅存在一个 mousemove 处理器
$('section')
.off('mousemove') // 先清除可能存在的旧监听器（防重复绑定）
.on('mousemove', function(e) {
if (isMousemoveActive) {
parallaxIt(e, ".d", -12.5);
parallaxIt(e, ".bg", -3.75);
}
});
});
// 【停止按钮】关闭状态、解绑事件、重置位置
$('.button2').click(function() {
isMousemoveActive = false;
$('section').off('mousemove'); // 彻底移除事件监听
resetPositions(); // 平滑返回初始坐标
});
// 【视差核心函数】计算相对偏移并驱动 TweenMax
function parallaxIt(e, target, movement) {
var $section = $('section');
var relX = e.pageX - $section.offset().left;
var relY = e.pageY - $section.offset().top;
TweenMax.to(target, 1, {
x: (relX - $section.width() / 2) / $section.width() * movement,
y: (relY - $section.height() / 2) / $section.height() * movement,
ease: Power2.easeOut
});
}
⚠️ 注意事项（写给爱好者的贴心提示）
-
务必引入 TweenMax：本方案依赖 GSAP v2（兼容 jQuery 1.11），请在 中添加：
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
- 避免重复绑定：每次点击按钮1前先 .off('mousemove')，否则会累积多个监听器，导致性能下降或行为异常；
- CSS 初始状态很重要：确保 .d 和 .bg 元素默认 transform: none 或 x/y = 0，否则 TweenMax.to(..., {x:0}) 可能无法精准归零（可配合 clearProps:"transform" 增强鲁棒性）；
- 移动端适配？ 当前代码仅响应鼠标，如需触屏支持，可扩展监听 touchmove 事件（进阶建议，本例暂不展开）。
通过这个结构清晰、逻辑自洽的实现，你既能享受酷炫的视差交互，又能随时一键“复位”，真正掌控动画生命周期——无需框架、不依赖现代语法，适合个人项目快速落地。
