本文实例为大家分享了js鼠标跟随效果展示的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt; style>
身体,div {
保证金:0;
填充:0;
}
#箱{
位置:相对;
保证金:20 px汽车;
宽度:300 px;
身高:300 px;
背景:# 008000;
}
马克# {
位置:绝对的;
上图:0;
左:0;
宽度:100 px;
身高:100 px;
背景:红色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=昂凶印痹?
& lt;/div>
& lt; script>
var盒=. getelementbyid(盒);
盒子。鼠标移到目标上=函数(e) {
e=e | | window.event;
马克var=document.createElement (div);
马克。id=奥砜恕?
this.appendChild(马克);
mark.style。左=e。clientX——这一点。offsetLeft + 5 +“px”;
mark.style。=e。clientY——这一点。offsetTop + 5 +“px”;//阻止马克盒子的onmouseover事件的冒泡传播
马克。鼠标移到目标上=函数(e) {
e=e | | window.event;
e。stopPropagation & # 63;e.stopPropagation (): e。cancelBubble=true;
}
马克。onmouseout=function (e) {
e=e | | window.event;
e。stopPropagation & # 63;e.stopPropagation (): e。cancelBubble=true;
}
}//以下代码会出现一个问题,当鼠标移动过快的时候,鼠标会进入到马克这个盒子,会触发它的鼠标移至行为,由于事件的冒泡传播机制,导致盒子的鼠标悬停会重新被触发,导致红色盒子一直在不断的创建
盒子。onmousemove=function (e) {
e=e | | window.event;
马克var=. getelementbyid(“马克”);
如果(马克){
mark.style。左=e。clientX——这一点。offsetLeft + 5 +“px”;
mark.style。=e。clientY——这一点。offsetTop + 5 +“px”;
}
}//依然有问题:鼠标快速移动,首先会到马克上,此时浏览器在计算马克的位置,计算完成,马克到达指定的位置,此时鼠标又重新回到盒子上,触发了盒子的鼠标悬停,也触发了马克的mouseout,也会传播到盒子的mouseout上,会把马克先删除,然后在创建
盒子。onmouseout=function (e) {
e=e | | window.event;
马克var=. getelementbyid(“马克”);
如果(马克){
this.removeChild(马克);
}
}//上面代码也可以通过将超过和事件分别改为进入和离开//onmouseenter和onmouseover都是鼠标滑上去的行为,但是onmouseenter浏览器默认阻止了它的冒泡传播(马克的onmouseenter行为触发,不会传播到盒子);而onmouseover是存在冒泡传播的,想要阻止的话需要手动阻止
& lt;/script>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
