Maison > Article > interface Web > Code de suivi de la souris implémenté par JS (effet de clic de main de dessin animé)
Code de suivi de la souris implémenté par JS (effet de clic de main de dessin animé)
- PHPzavant
- 2016-05-16 15:35:062159parcourir
Cet article présente principalement le code de suivi de la souris implémenté en JS, avec des effets de clic de main de dessin animé. Impliquant la réponse aux événements de souris JavaScript et les compétences d'appel dynamique des éléments de la page, les amis qui en ont besoin peuvent s'y référer, comme suit :
Un petit effet de main qui suit la souris partout où la souris se déplace. La main suivra. L'effet de main apparaîtra. Une fois placées sur le lien, les mains changeront. Je partagerai le code de suivi de la souris JS avec tout le monde.
Une capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démonstration en ligne est la suivante :
http : //demo.jb51.net/ js/2015/js-handle-style-focus-codes/
Le code spécifique est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可爱的鼠标跟随</title>
<style>
html{ background:#000;}
body,html,input{ cursor:none;}
body,html{ height:100%;}
#cursor{ position:absolute; left:100px; top:100px; display:block;}
</style>
<script>
window.onload = function(){
var oCursor = document.getElementById("cursor");
document.onmousemove=function (ev){
var oEvent=ev||event,
oWidth = document.documentElement.clientWidth,
oHeight = document.documentElement.clientHeight,
scrollTop=document.documentElement.scrollTop + oEvent.clientY,
scrollLeft=document.documentElement.scrollLeft + oEvent.clientX;
if(scrollTop > oHeight-oCursor.offsetHeight){
oCursor.style.top = oHeight-oCursor.offsetHeight+'px';
}else if(scrollTop < 0){
oCursor.style.top = 0;
}else{
oCursor.style.top = scrollTop+'px';
}
if(scrollLeft > oWidth-oCursor.offsetWidth){
oCursor.style.left = oWidth-oCursor.offsetWidth+'px';
}else{
oCursor.style.left = scrollLeft+'px';
}
document.onmousedown = function(){
oCursor.innerHTML = "<img src='images/cursor_hover.png' />";
return false;
}
document.onmouseup = function(){
oCursor.innerHTML = "<img src='images/cursor.png' />";
}
};
}
</script>
</head>
<body>
<p id="cursor"><img src="images/cursor.png" /></p>
<input type="button" style="font-size:36px; margin:100px;" value="点击" onclick="window.open('http://www.baidu.com')" />
</body>
</html>Ce qui précède est tout le contenu de ce chapitre. J'espère qu'il sera utile à tout le monde dans la programmation JavaScript. Pour plus d'aide, veuillez visiter le Tutoriel vidéo JavaScript pour plus de tutoriels connexes !