HTML, CSS et jQuery : Créez un bouton avec un effet flottant-js tutoriel-php.cn

HTML, CSS et jQuery : Créez un bouton avec un effet flottant

WBOY

Libérer： 2023-10-24 12:09:39

original

1086 Les gens l'ont consulté

HTML, CSS et jQuery : Créez un bouton avec un effet flottant

HTML, CSS et jQuery : Créez un bouton avec un effet flottant, des exemples de code spécifiques sont requis

Citation :
Aujourd'hui, la conception de sites Web est devenue une forme d'art, et en utilisant des technologies telles que HTML, CSS et JavaScript, nous Une variété d'effets spéciaux et d'effets interactifs peuvent être ajoutés à la page. Cet article présentera brièvement comment utiliser HTML, CSS et jQuery pour créer un bouton avec un effet flottant et fournira des exemples de code spécifiques.

1. Structure HTML
Tout d'abord, nous devons créer la structure de base requise pour le bouton dans le fichier HTML. L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>浮动按钮</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <button class="float-btn">点击我</button>
    </div>
  </body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous créons un conteneur <div class="container"> qui contient un bouton <button class="float - btn">. Afin d'obtenir l'effet flottant, nous devons également introduire des fichiers CSS dans <head>. <div class="container">，其中包含一个按钮<button class="float-btn">。为了实现浮动效果，我们还需要在<head>中引入CSS文件。

二、CSS样式
接下来，我们使用CSS对按钮进行样式设计，并实现浮动效果。请看下面的CSS代码示例：

.container {
  width: 300px;
  height: 300px;
  position: relative;
}

.float-btn {
  width: 150px;
  height: 50px;
  background-color: #f00;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s, box-shadow 0.3s;
}

.float-btn:hover {
  transform: translateX(-50%) translateY(-10px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

Copier après la connexion

在上述代码中，我们针对容器和按钮分别进行了样式设置。容器<div class="container">的宽高被固定为300px，并相对定位。按钮<button class="float-btn">的样式包括宽高、背景颜色、字体颜色、边框样式、圆角样式、字体大小等。按钮还通过绝对定位和left、transform属性将其水平居中定位在容器底部。transition属性用于指定变换效果的过渡时间。

在按钮的:hover伪类样式中，我们使用了transition和transform属性实现了按钮在鼠标悬停时的浮动效果。当鼠标悬停在按钮上时，按钮将向上浮动10px，并带有阴影效果。

三、jQuery动态效果
最后，我们使用jQuery为按钮添加了一个点击事件的动态效果。代码示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>浮动按钮</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="container">
      <button class="float-btn">点击我</button>
    </div>
  </body>
</html>

Copier après la connexion

$(document).ready(function() {
  $('.float-btn').click(function() {
    $(this).toggleClass('active');
  });
});

Copier après la connexion

在上述代码中，我们首先在中引入了jQuery库文件。然后在script.js文件中，通过$(document).ready()函数确保页面加载完毕后执行下面的代码。当按钮被点击时，使用toggleClass()方法为按钮添加或移除active

2. Style CSS

Ensuite, nous utilisons CSS pour styliser le bouton et obtenir un effet flottant. Veuillez regarder l'exemple de code CSS ci-dessous :
rrreee

Dans le code ci-dessus, nous avons stylisé le conteneur et le bouton séparément. La largeur et la hauteur du conteneur

<div class="container"> sont fixées à 300px et positionnées de manière relative. Le style du bouton <button class="float-btn"> inclut la largeur et la hauteur, la couleur d'arrière-plan, la couleur de la police, le style de bordure, le style des coins arrondis, la taille de la police, etc. Le bouton est également centré horizontalement en bas du conteneur via le positionnement absolu et les attributs left et transform. L'attribut transition est utilisé pour spécifier le temps de transition de l'effet de transformation. 🎜🎜Dans le style pseudo-classe :hover du bouton, nous utilisons les attributs transition et transform pour réaliser le bouton flottant lorsque la souris est en vol stationnaire. Lorsque la souris passe sur le bouton, le bouton flottera de 10 pixels avec un effet d'ombre. 🎜🎜3. Effet dynamique jQuery🎜Enfin, nous utilisons jQuery pour ajouter un effet dynamique d'un événement de clic au bouton. L'exemple de code est le suivant : 🎜rrreeerrreee🎜Dans le code ci-dessus, nous avons d'abord introduit le fichier de bibliothèque jQuery dans . Ensuite, dans le fichier script.js, utilisez la fonction $(document).ready() pour vous assurer que le code suivant est exécuté après le chargement de la page. Lorsque vous cliquez sur le bouton, utilisez la méthode toggleClass() pour ajouter ou supprimer la classe active pour le bouton. De cette façon, nous pouvons également styliser ou animer le bouton lorsqu'il est actif. 🎜🎜Résumé : 🎜En utilisant HTML, CSS et jQuery, nous pouvons créer une variété d'effets spéciaux et d'effets interactifs, tels que les boutons avec effets flottants présentés dans cet article. J'espère que grâce aux exemples de code contenus dans cet article, les lecteurs pourront avoir une compréhension préliminaire de la façon d'obtenir un tel effet, et pourront optimiser et personnaliser davantage la conception en fonction de leurs propres besoins. 🎜

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!