Rumah >hujung hadapan web >tutorial js >HTML, CSS dan jQuery: Buat butang dengan kesan terapung

HTML, CSS dan jQuery: Buat butang dengan kesan terapung

WBOYasal: 2023-10-24 12:09:391052semak imbas

HTML, CSS dan jQuery: Membuat butang dengan kesan terapung memerlukan contoh kod khusus

Pengenalan:
Sekarang , Web reka bentuk telah menjadi satu bentuk seni Dengan menggunakan teknologi seperti HTML, CSS dan JavaScript, kami boleh menambah pelbagai kesan khas dan kesan interaktif pada halaman. Artikel ini akan memperkenalkan secara ringkas cara menggunakan HTML, CSS dan jQuery untuk mencipta butang dengan kesan terapung dan memberikan contoh kod khusus.

1. Struktur HTML
Pertama, kita perlu mencipta struktur asas yang diperlukan untuk butang dalam fail HTML. Contoh kod adalah seperti berikut:

<!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>

Dalam kod di atas, kami mencipta bekas <div class="container">, yang mengandungi butang <code> . Untuk mencapai kesan terapung, kami juga perlu memperkenalkan fail CSS dalam . <div class="container">，其中包含一个按钮<code><button class="float-btn"></button>。为了实现浮动效果，我们还需要在中引入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);
}

在上述代码中，我们针对容器和按钮分别进行了样式设置。容器<div class="container">的宽高被固定为300px，并相对定位。按钮<code><button class="float-btn"></button>的样式包括宽高、背景颜色、字体颜色、边框样式、圆角样式、字体大小等。按钮还通过绝对定位和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>

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

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

2. Gaya CSS

Seterusnya, kami menggunakan CSS untuk menggayakan butang dan mencapai kesan terapung. Sila lihat contoh kod CSS berikut:
rrreee

Dalam kod di atas, kami telah menggayakan bekas dan butang secara berasingan. Lebar dan tinggi bekas

<div class="container"> ditetapkan pada 300px dan diletakkan secara relatif. Gaya butang <code><button class="float-btn"></button>

termasuk lebar dan tinggi, warna latar belakang, warna fon, gaya sempadan, gaya sudut bulat, saiz fon, dsb. Butang juga dipusatkan secara mendatar di bahagian bawah bekas menggunakan kedudukan mutlak dan atribut kiri dan transform. Atribut transition digunakan untuk menentukan masa peralihan kesan transformasi. #🎜🎜##🎜🎜#Dalam gaya kelas semu :hover butang, kami menggunakan atribut transition dan transform untuk melaksanakan butang itu. Kesan terapung pada tuding tetikus. Apabila tetikus dituding di atas butang, butang akan terapung 10px ke atas dengan kesan bayang-bayang. #🎜🎜##🎜🎜#3 kesan dinamik jQuery#🎜🎜#Akhir sekali, kami menggunakan jQuery untuk menambah kesan dinamik acara klik pada butang. Contoh kod adalah seperti berikut: #🎜🎜#rrreeerrreee#🎜🎜#Dalam kod di atas, kami mula-mula memperkenalkan fail perpustakaan jQuery dalam . Kemudian dalam fail script.js, gunakan fungsi $(document).ready() untuk memastikan kod berikut dilaksanakan selepas halaman dimuatkan. Apabila butang diklik, gunakan kaedah toggleClass() untuk menambah atau mengalih keluar kelas active untuk butang tersebut. Dengan cara ini, kita juga boleh menggayakan atau menghidupkan butang semasa ia aktif. #🎜🎜##🎜🎜#Ringkasan: #🎜🎜# Dengan menggunakan HTML, CSS dan jQuery, kami boleh mencipta pelbagai kesan khas dan kesan interaktif, seperti butang dengan kesan terapung yang ditunjukkan dalam artikel ini. Saya berharap melalui contoh kod dalam artikel ini, pembaca boleh mempunyai pemahaman awal tentang cara mencapai kesan sedemikian, dan boleh mengoptimumkan dan memperibadikan reka bentuk mengikut keperluan mereka sendiri. #🎜🎜#

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Buat butang dengan kesan terapung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

HTML, CSS dan jQuery: Buat butang dengan kesan terapung

Artikel berkaitan