首先，在HTML结构层面创建需要跟踪鼠标动向的图像标签：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标跟随图片特效</title>
<style>
#follower {
position:absolute;
width:100px; /* 设置你需要显示的图片大小 */
height:auto;
}
</style>
<body>
<img id='follower' src='your-image-source.jpg'>
<script src="mouseFollow.js"></script>
</body>
</html>
接下来，在外部JS文件`mouseFollow.js`或内联脚本中编写逻辑以实现实现这一功能:
javascript
window.onload = function() {
var follower = document.getElementById('follower');
// 获取浏览器窗口尺寸以便计算偏移量
var windowWidth = window.innerWidth || document.documentElement.clientWidth,
windowHeight = window.innerHeight || document.documentElement.clientHeight;
// 定义用于存储当前鼠标坐标变量
let mouseX= 0, mouseY = 0;
// 监听整个文档区域内的鼠标移动事件
document.addEventListener("mousemove", function(event) {
// 计算并获取相对于视口左上角的实际鼠标坐标
mouseX = event.clientX - (follower.offsetWidth / 2);
mouseY = event.clientY - (follower.offsetHeight / 2);
// 防止图片超出可视范围边界
if(mouseX <= 0 ) { mousePosX = 0; }
else if( mouseX >= windowWidth-follower.offsetWidth ){ mouseX = windowWidth - follower.offsetWidth;}
if(mouseY <= 0){ mouseY = 0;}
else if(mouseY>= windowHeight-follower.offsetHeight){ mouseY = windowHeight - follower.offsetHeight;}
// 更新图片的位置属性使其追随鼠标
follower.style.left = `${Math.round(mouseX)}px`;
follower.style.top = `${Math.round(mouseY)}px`;
});
};
// 现在当你在浏览这个页面并将鼠标移动时，你会发现这张图始终紧贴着你的光标。
以上代码的核心原理在于利用JavaScript监听鼠标的move事件，并通过event对象取得鼠标的当前位置信息，然后据此调整目标图片元素(follower)'left' 和 'top' CSS样式值来达到其跟随鼠标的效果。同时对可能出现的目标图片离开viewport的情况进行了处理，确保它始终保持可见。这样就完成了一个基础但又不失趣味性的鼠标跟随图片特效。