JavaScript怎么实现鼠标追随

藏色散人
Freigeben: 2021-06-27 10:18:02
Original
2557 Leute haben es durchsucht

JavaScript实现鼠标追随的方法:1、设置“evt || window.event;”;2、创建“function(evt)”;3、创建“document.body.scrollTop;”;4、把鼠标的当前位置赋值给元素的位置值即可。

JavaScript怎么实现鼠标追随

本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

JavaScript怎么实现鼠标追随?

js实现简单鼠标跟随效果的方法

js实现简单鼠标跟随效果的方法。具体分析如下:

鼠标跟随,顾名思义,就是在鼠标移动的时候,有个动画跟随着鼠标一起移动。

要点一:

var oEvent = evt || window.event;
Nach dem Login kopieren

这个是为了兼容ie和ff而写的,在ie下window.event表示event对象,而ff下,是给事件函数传一个参数,这个参数就表示事件对象。

要点二:

document.onmousemove = function(evt)
Nach dem Login kopieren

鼠标跟随是在鼠标移动时发生的事情。

要点三:

document.documentElement.scrollTop || document.body.scrollTop;
Nach dem Login kopieren

这是为了兼容chrome和其它浏览器,滚动条距上边滚动的距离,chrome用后边那个,其它浏览器用前面那个。

要点四:

oTop.style.top=oEvent.clientY+scrolltop+10+"px";
Nach dem Login kopieren

当鼠标移动时把鼠标的当前位置赋值给元素的位置值。

oEvent.clientY即为鼠标的当前Y坐标的位置,加scrolltop的距离是要在滚动到不是第一屏的时候,鼠标跟随效果依然不改变而写。

代码如下:

    无标题文档   
  文字 
鼠标跟随
Nach dem Login kopieren

【推荐学习:javascript高级教程

Das obige ist der detaillierte Inhalt vonJavaScript怎么实现鼠标追随. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!