所谓鼠标跟随,就是把你设置的那个跟随物随着鼠标的点击的位置进行索引,然后以动画的形式到达鼠标点击的位置。
下面是整个代码片,欢迎下载使用:
html代码段:
<img src="img.jpg" alt="" width="50" height="50" id="pic"/>
图片自己找一个喜欢的图片放进去或者其他东西即可,用我的图片也行,如下所示
css代码段:
这个css代码不多,完全是为了固定它再屏幕的左上角,所以left=0;top=0,里面的*号适用于整个页面。
* {
margin: 0;
padding: 0
}
img {
position: absolute;
top: 0;
left: 0;
}
js代码段:
当你写js代码时,第一个任务就是定义一个对象,然后获取它的id,才能对其进行操作。
<script>
var pic = document.getElementById("pic");
//需求:鼠标在页面上点击 获取点击时的位置 然后让图片以动画效果飞过来
document.onclick = function (event) {
var event = event || window.event;
//鼠标在页面上的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
//计算图片应该到的位置
var targetX = pageX - pic.offsetWidth / 2;
var targetY = pageY - pic.offsetHeight / 2;
//让图片以动画效果飞过来
animate(pic, {"top": targetY, "left": targetX});
};
</script>
以下这个js代码是已经封装好的,直接引用,几乎适合所有动画效果的代码
function animate(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var k in json) {
if (k === "opacity") {
var leader = getStyle(obj, k) * 100;
var target = json[k] * 100;
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader / 100;
} else if (k === "zIndex") {
obj.style.zIndex = json[k];
} else {
var leader = parseInt(getStyle(obj, k)) || 0;
var target = json[k];
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
}
if (leader != target) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 15);
}
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
}
但如果有道友有更好的答案或者哪里不明白的,顺手留个言,谢谢!