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

1476 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)