Comment lier des événements lors de la réduction de l'écran dans jquery

Avec la popularité des appareils mobiles, de plus en plus de personnes choisissent d'utiliser des téléphones mobiles, des tablettes et d'autres appareils mobiles pour naviguer sur le Web. Par conséquent, le design réactif est devenu une compétence essentielle pour la conception de sites Web modernes. Dans la conception réactive, l'événement de redimensionnement est l'un des événements les plus importants et peut être utilisé pour détecter les changements dans la taille de la fenêtre du navigateur afin d'obtenir une mise en page adaptative de la page. jQuery est l'une des bibliothèques JavaScript les plus utilisées actuellement, et je pense que tout le monde la connaît très bien. Ainsi, cet article explique comment utiliser jQuery pour lier des événements lorsque l'écran est réduit.

1. Le concept de base de l'événement resize

Dans le navigateur, l'événement resize est un événement déclenché lorsque la taille de la fenêtre change. C'est l'événement principal du responsive design.

1.1. Syntaxe de l'événement resize

La syntaxe de base de l'événement resize est la suivante :

$(window).resize(function(){
  // 在此处编写窗口大小改变后的操作
});

Dans le code ci-dessus, $(window) signifie surveiller la fenêtre, resize() Indique l'enregistrement d'une fonction de rappel pour l'événement resize, qui sera déclenché lorsque la taille de la fenêtre du navigateur change. $(window)表示对窗口进行监听，resize()表示注册一个resize事件的回调函数，该回调函数会在浏览器窗口大小发生变化时被触发执行。

1.2、resize事件的应用

通过resize事件，我们可以根据不同的窗口大小来实现不同布局效果，比如在窗口大小变成小于某个值时隐藏某些元素，或者在窗口变得非常小的情况下为页面添加新的样式等等。

二、jQuery实现缩小屏幕时绑定事件

在响应式设计中，我们通常需要在浏览器窗口大小发生变化时自动处理页面布局，这就需要使用到jQuery的resize事件。

2.1、检测窗口是否缩小

首先，我们需要检测当前窗口是否发生了缩小。比较简单的方法是将当前窗口的宽度保存在变量中，并在resize事件中判断当前窗口宽度是否小于之前保存的窗口宽度。代码如下：

// 保存当前窗口宽度
var windowWidth = $(window).width();

// 监听resize事件
$(window).resize(function() {
  // 判断当前窗口宽度是否小于之前保存的窗口宽度
  if($(window).width() < windowWidth){
    // 缩小时执行的代码
  } else{
    // 放大时执行的代码
  }
});

上述代码中，我们在窗口缩小时执行某些代码，放大时执行另一些代码。具体执行什么样的代码可以根据实际需求来决定。

2.2、绑定事件

在缩小屏幕时，我们可能需要执行某些特定的动作。比如，我们可能需要隐藏某些元素，改变某些文字的字号等等。这就需要在resize事件中绑定相应的事件。例如，以下代码实现了在窗口缩小时将ID为#title的元素的字号改为12像素：

$(window).resize(function() {
  // 获取当前窗口宽度
  var width = $(window).width();
  // 判断当前窗口宽度是否小于某一值
  if (width < 768) {
    // 窗口小于768时字号改为12px
    $("#title").css("font-size", "12px");
  } else {
    // 窗口大于等于768时字号改为16px
    $("#title").css("font-size", "16px");
  }
});

在窗口缩小时，这段代码会将元素ID为#title

1.2. Application de l'événement resize

Grâce à l'événement resize, nous pouvons obtenir différents effets de mise en page en fonction des différentes tailles de fenêtre, comme masquer certains éléments lorsque la taille de la fenêtre devient inférieure à une certaine valeur, ou lorsque la fenêtre devient très petite. Ajoutez de nouveaux styles à la page, etc.

2. jQuery implémente des événements de liaison lors de la réduction de l'écran

Dans la conception réactive, nous devons généralement gérer automatiquement la mise en page lorsque la taille de la fenêtre du navigateur change, ce qui nécessite l'utilisation de l'événement de redimensionnement de jQuery. 🎜🎜2.1. Détecter si la fenêtre a été réduite🎜🎜Tout d'abord, nous devons détecter si la fenêtre actuelle a été réduite. Une méthode plus simple consiste à enregistrer la largeur de la fenêtre actuelle dans une variable et à déterminer si la largeur de la fenêtre actuelle est plus petite que la largeur de la fenêtre précédemment enregistrée dans l'événement de redimensionnement. Le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, on exécute certains codes lorsque la fenêtre est réduite et d'autres codes lorsqu'elle est agrandie. Le code spécifique à exécuter peut être déterminé en fonction des besoins réels. 🎜🎜2.2. Événements de liaison🎜🎜Lors de la réduction de l'écran, nous devrons peut-être effectuer certaines actions spécifiques. Par exemple, nous devrons peut-être masquer certains éléments, modifier la taille de la police de certains textes, etc. Cela nécessite de lier l'événement correspondant dans l'événement resize. Par exemple, le code suivant modifie la taille de la police de l'élément avec l'ID #title à 12 pixels lorsque la fenêtre est réduite : 🎜rrreee🎜Lorsque la fenêtre est réduite, ce code changera l'élément avec l'ID La taille de la police de #title est modifiée à 12 pixels ; lorsque la fenêtre est agrandie, la taille de la police de cet élément reviendra à 16 pixels. 🎜🎜3. Résumé🎜🎜Cet article explique comment utiliser jQuery pour lier des événements lors de la réduction de l'écran. En conception réactive, l'utilisation de l'événement resize peut contrôler très efficacement la disposition des éléments de la page. 🎜🎜Lors de l'application de l'événement de redimensionnement, nous devons d'abord déterminer si la fenêtre est réduite, puis effectuer certaines actions. Par exemple, une mise en page adaptative peut être obtenue en modifiant la taille de la police des éléments, en masquant certains éléments, etc. J'espère que cet article sera utile à tout le monde ! 🎜

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!