效果:
代码:
<img src="angel.gif" alt="" id="angel">
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#angel {
position: absolute;
}
<script src="./lib/jquery.js"></script>
<script>
$(function() {
// 1.获取图片
var angel = $('#angel');
var timer = null; // 步骤1:定义节流阀
// 2.绑定mousemove事件
$(document).on('mousemove', function(e) {
// 步骤3:判断节流阀是否为空
if (timer) {
return;
} else {
// 步骤2:开启延时器
timer = setTimeout(function() {
$(angel).css('top', e.pageY + 'px').css('left', e.pageX + 'px');
console.log('ok');
timer = null;
}, 40);
}
});
});
</script>
素材: