JS/jquery implémente des événements de souris pour contrôler l'affichage et le masquage des éléments de la page (exemple de code)-js tutoriel-php.cn

JS/jquery implémente des événements de souris pour contrôler l'affichage et le masquage des éléments de la page (exemple de code)

青灯夜游

Libérer： 2018-10-20 11:28:25

original

1397 Les gens l'ont consulté

Ce chapitre vous montrera comment utiliser JS/jquery pour contrôler la visibilité des éléments de la page à l'aide d'événements de souris. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. mouseout et mouseleave

Pour le mouvement du pointeur de la souris vers l'intérieur et vers l'extérieur, les événements mouseover, mouseout et mouseleave sont impliqués.

mouseover : cet événement est déclenché lorsque le pointeur de la souris se déplace vers l'élément cible ;

mouseout : Cet événement est déclenché lorsque le pointeur de la souris sort de l'élément cible ou de ses sous-éléments ;

mouseleave : cet événement ne sera déclenché que lorsque le pointeur de la souris sort de l'élément cible ;

Une attention particulière doit être accordée ici à la différence entre mouseout et mouseleave. Jetons un coup d'œil à l'exemple de code suivant :

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>鼠标控制页面元素显隐</title>
		<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
		<style>
			#boxout,
			#boxleave {
				width: 250px;
				height: 100px;
				padding-top: 20px;
				background-color: #cccccc;
				float: left;
				margin-left: 30px;
			}
			
			#boxoutson,
			#boxleaveson {
				width: 200px;
				height: 50px;
				background-color: yellow;
				padding: 0px auto;
				margin: 0px auto;
			}
		</style>
	</head>

	<body>
		<div id="boxout">
			<div id="boxoutson">
				第<span></span>次触发mouseout事件
			</div>
		</div>
		<div id="boxleave">
			<div id="boxleaveson">
				第<span></span>次触发mouseleave事件
			</div>
		</div>
		<script>
			x = 0;
			y = 0;
			$("#boxout").mouseout(function() {
				$("#boxout span").text(x += 1);
			});
			$("#boxleave").mouseleave(function() {
				$("#boxleave span").text(y += 1);
			});
		</script>
	</body>

</html>

Copier après la connexion

Rendu :

JS/jquery implémente des événements de souris pour contrôler laffichage et le masquage des éléments de la page (exemple de code)

2. fonduIn et fonduOut

Dans l'exemple précédent, les méthodes show() et hide() ont été utilisées et l'effet de masquage du premier plan a été réalisé instantanément. Afin d'améliorer l'expérience utilisateur réelle, nous introduisons ici deux "amis" plus conviviaux, à savoir fadeIn et fadeOut.

fadeIn : la méthode utilise l’effet de fondu entrant pour afficher l’élément cible.

fadeOut : la méthode utilise l'effet de fondu sortant pour masquer l'élément cible

Ces deux méthodes peuvent configurer des paramètres pour contrôler la vitesse, tels que lent, normal, rapide ou spécifier le nombre de millisecondes.

Asseyons-nous et comparons les effets de show(), hide() et fadeIn(), fadeOut(). Le code est le suivant :

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>鼠标控制页面元素显隐</title>
		<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
		<style>
			#box1,
			#box2 {
				width: 250px;
				height: 100px;
				padding-top: 20px;
				background-color: #cccccc;
				float: left;
				margin-left: 30px;
			}
			
			#box1son,
			#box2son {
				width: 200px;
				height: 50px;
				background-color: yellow;
				padding: 0px auto;
				margin: 0px auto;
			}
		</style>
	</head>

	<body>
		<div id="box1">
			<div id="box1son">
				<span>hide和show</span>
			</div>
		</div>
		<div id="box2">
			<div id="box2son">
				<span>fadeIn和fadeOut</span>
			</div>
		</div>
		<script>
			$("#box1 span").hide();
			$("#box1").mouseover(function() {
				$("#box1 span").show();
			}).mouseleave(function() {
				$("#box1 span").hide();
			});
			$("#box2 span").hide();
			$("#box2").mouseover(function() {
				$("#box2 span").fadeIn("slow");
			}).mouseleave(function() {
				$("#box2 span").fadeOut("slow");
			});
		</script>
	</body>

</html>

Copier après la connexion

Le rendu de la souris ne monte pas :

JS/jquery implémente des événements de souris pour contrôler laffichage et le masquage des éléments de la page (exemple de code)

L'effet du déplacement de la souris vers le haut :

JS/jquery implémente des événements de souris pour contrôler laffichage et le masquage des éléments de la page (exemple de code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

JS/jquery implémente des événements de souris pour contrôler l'affichage et le masquage des éléments de la page (exemple de code)