技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

漂亮的HTML同一頁(yè)內(nèi)可平滑切換的登錄/注冊(cè)表單

作者:admin    時(shí)間:2022-8-3 16:31:59    瀏覽:

今天介紹一個(gè)漂亮的HTML同一頁(yè)內(nèi)可平滑切換的登錄/注冊(cè)表單，該表單幾乎是純CSS實(shí)現(xiàn)，簡(jiǎn)單的JQuery代碼僅3行。

可平滑切換的登錄/注冊(cè)表單
可平滑切換的登錄/注冊(cè)表單

demodownload

實(shí)例介紹

登錄/注冊(cè)兩個(gè)表單在同一界面上，隱藏一個(gè)顯示另一個(gè)，它們之間的隱顯切換，是通過(guò)鼠標(biāo)事件后平滑過(guò)渡的。

HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="container-forms">
      <div class="container-info">
        <div class="info-item">
          <div class="table">
            <div class="table-cell">
              <p>已經(jīng)有賬號(hào)了？ </p>
              <div class="btn">登錄 </div>
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="table">
            <div class="table-cell">
              <p>還沒(méi)有賬號(hào)？ </p>
              <div class="btn">注冊(cè) </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-form">
        <div class="form-item log-in">
          <div class="table">
            <div class="table-cell">
              <input name="Username" placeholder="用戶名" type="text" />
              <input name="Password" placeholder="密碼" type="Password" />
              <div class="btn">登錄 </div>
            </div>
          </div>
        </div>
        <div class="form-item sign-up">
          <div class="table">
            <div class="table-cell">
              <input name="email" placeholder="Email" type="text" />
              <input name="fullName" placeholder="Full Name" type="text" />
              <input name="Username" placeholder="Username" type="text" />
              <input name="Password" placeholder="Password" type="Password" />
              <div class="btn">注冊(cè) </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src='jquery-3.2.1.min.js'></script>
  <script type="text/javascript">
  $(".info-item .btn").click(function(){
    $(".container").toggleClass("log-in")
  });
  </script>
</body>
</html>

代碼解釋

1、HTML表單結(jié)構(gòu)有里外三層，最外層是一個(gè)div，其class屬性值是container。中間是兩個(gè)并列的div，它們的class值分別是container-forms和container-form。

container-forms的div，包含的是登錄和注冊(cè)的切換文字信息及按鈕。

container-form的div，包含的則是登錄和注冊(cè)兩個(gè)表單。

2、HTML代碼引用一個(gè)style.css文件，這個(gè)是表單的CSS樣式設(shè)計(jì)文件。

3、HTML代碼引用一個(gè)jquery-3.2.1.min.js庫(kù)文件，因?yàn)橐玫絡(luò)query代碼實(shí)現(xiàn)表單切換效果。

$(".info-item .btn").click(function(){
    $(".container").toggleClass("log-in")
});

相關(guān)文章

標(biāo)簽: 注冊(cè)表單  登錄表單  表單  
x