Baidu 로그인 상자의 동적 전환 효과를 구현하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Baidu 로그인 상자의 동적 전환 효과를 구현하는 방법

小云云

Jan 17, 2018 pm 01:52 PM

스위치 동적 효과

Baidu 로그인 상자의 동적 전환 효과를 달성하는 방법은 무엇입니까? 이 글에서는 주로 Baidu 로그인 상자의 동적 전환 효과를 구현하기 위해 jQuery를 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

상태, 효과 그림을 전환하려면 오른쪽 하단에 있는 그림을 클릭하세요.

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>百度登录框</title> 
  <style type="text/css"> 
    *{margin: 0;padding: 0;} 
    body 
    { 
      font-size: 12px; 
    } 
    a 
    { 
      text-decoration: none; 
      color: #2647CB; 
    } 
    a:hover 
    { 
      text-decoration: underline; 
      color: red; 
    } 
    .wrap 
    { 
      width: 390px; 
      height: 450px; 
      margin: 50px auto; 
      border: 1px solid #8A8989; 
      position: relative; 
    } 
    .main 
    { 
      width: 350px; 
      height: 400px; 
      margin: 0 auto; 
    } 
    .header 
    { 
      width: 100%; 
      height: 50px; 
      line-height: 50px; 
      background-image: url(images/foot.png); 
      background-color: rgb(247,247,247); 
      background-repeat: no-repeat; 
    } 
    .header h3 
    { 
      display: inline-block; 
      line-height: 50px; 
      margin-left: 50px; 
    } 
    .header span 
    { 
      display: inline-block; 
      float: right; 
      margin: auto 15px; 
      font-size: 30px; 
    } 
    .inputp 
    { 
      display: block; 
      width: 350px; 
      height: 40px; 
      margin: 10px auto; 
    } 
    .phoneIn 
    { 
      display: inline-block; 
      float: right; 
      font-size: 14px; 
      background-image: url(images/phone.png); 
      background-repeat: no-repeat; 
      padding-left: 20px; 
      margin: 30px 0px 10px 0px; 
    } 
    .smBtn 
    { 
      background: #2066C5; 
      color: white; 
      font-size: 18px; 
      font-weight: bold; 
      height: 50px; 
      border-radius: 4px; 
    } 
    .smBtn:hover 
    { 
      background: #4067EE; 
    } 
    .pull-right 
    { 
      display: inline-block; 
      float: right; 
    } 
    .other 
    { 
      width: 350px; 
      padding-top: 50px; 
      margin: 0 auto; 
    } 
    .togglep1,.togglep2 
    { 
      position: absolute; 
      right: 0; 
      bottom: 0; 
      z-index: 1000; 
    } 
    .weima 
    { 
      text-align: center; 
      padding-top: 50px; 
      width: 390px; 
      height: 400px; 
    } 
    .weima p  
    { 
      line-height: 50px; 
    } 
    .choice2 
    { 
      display: none; 
    } 
    #close:hover 
    { 
      cursor: pointer; 
      color: blue; 
    } 
  </style> 
</head> 
<body> 
<!-- 账号密码登录 --> 
  <p class="wrap"> 
    <p class="header"> 
      <h3>登录百度账号</h3> 
      <span id="close" title="关闭">X</span> 
    </p> 
    <p class="choice1"> 
      <p class="main"> 
      <a href="" class=" rel="external nofollow" rel="external nofollow" rel="external nofollow" phoneIn">短信快捷登录</a> 
      <form action=""> 
        <input type="text" class="inputp" placeholder="手机/邮箱/账号"> 
        <input type="password" class="inputp" placeholder="请输入登录密码"> 
        <p class="inputp"> 
        <input type="checkbox" value="checked" checked="checked"><label for="">下次自动登录</label> 
        <a href="" class=" rel="external nofollow" rel="external nofollow" rel="external nofollow" pull-right" >登录遇到问题</a> 
        </p> 
        <input type="submit" value="登录" class="inputp smBtn"> 
        <a href="" class=" rel="external nofollow" rel="external nofollow" rel="external nofollow" pull-right" >立即注册</a> 
      </form> 
      <p class="other"> 
      <p>可以使用以下方式登录</p> 
      <a href=""><img src=" rel="external nofollow" rel="external nofollow" images/qq.png" alt=""></a> 
      <a href=""><img src=" rel="external nofollow" rel="external nofollow" images/wb.png" alt=""></a> 
      </p> 
    </p> 
    <p class="togglep1"> 
      <img src="images/small2wm.png" alt=""> 
      </p> 
    </p> 
    <!-- 二维码登录 --> 
<p class="choice2"> 
    <p class="weima"> 
    <p>手机扫描,安全登录</p> 
    <img src="images/2weima.png" alt=""> 
    <p>请使用手机百度app扫描登录</p> 
  </p> 
    <p class="togglep2"> 
      <img src="images/cpt.png" alt=""> 
    </p> 
  </p> 
  </p> 
</body> 
<!-- 导入jquery文件 --> 
<script type="text/javascript" src="jquery-3.1.1.min.js"></script> 
<script> 
  $(document).ready(function(){ 
  /*这是一个自定义的函数,作用是设置class1类为隐藏,class2类显示*/ 
     function showp(class1,class2){ 
      $(class1).css("display","none"); 
      $(class2).css("display","block"); 
     } 
  /*给右下角的图标设置点击事件*/ 
    $(&#39;.togglep1&#39;).click(function(){ 
      showp(".choice1",".choice2"); 
    }) 
    $(&#39;.togglep2&#39;).click(function(){ 
      showp(".choice2",".choice1"); 
    }) 
  /*给右上角的关闭按钮设置点击事件*/ 
    $("#close").click(function(){ 
      $(".wrap").css("display","none"); 
    }) 
  }) 
</script> 
</html>

로그인 후 복사

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7664

Cakephp 튜토리얼

1393

C# 튜토리얼

1205

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

사용자에게 드문 결함 발생: Samsung Watch 스마트워치에서 갑자기 흰색 화면 문제가 발생함 Apr 03, 2024 am 08:13 AM

스마트폰 화면에 녹색 줄이 나타나는 문제를 겪어보셨을 텐데요. 한 번도 본 적이 없더라도 인터넷에서 관련 사진을 본 적이 있을 것입니다. 그렇다면 스마트워치 화면이 하얗게 변하는 상황을 겪어보신 적 있으신가요? CNMO는 지난 4월 2일 외신을 통해 한 Reddit 사용자가 소셜 플랫폼에 삼성 워치 시리즈 스마트워치 화면이 하얗게 변하는 사진을 공유했다는 사실을 접했습니다. 해당 이용자는 "떠날 때 충전 중이었는데, 돌아올 때 이랬다. 재시작을 하려고 했는데, 삼성워치 스마트워치 화면이 하얗게 변했다"고 적었다. Reddit 사용자가 특정 모델을 지정하지 않았습니다. 하지만 사진으로 보면 삼성 워치5가 될 것 같습니다. 이전에 다른 Reddit 사용자도 보고했습니다.

VirtualBox 고정 디스크를 동적 디스크로 또는 그 반대로 변환 Mar 25, 2024 am 09:36 AM

가상 머신을 생성할 때 디스크 유형을 선택하라는 메시지가 표시되며 고정 디스크 또는 동적 디스크를 선택할 수 있습니다. 고정 디스크를 선택했지만 나중에 동적 디스크가 필요하다는 사실을 깨닫게 된다면 어떻게 될까요? 아니면 그 반대의 경우도 가능합니다. 이번 포스팅에서는 VirtualBox 고정 디스크를 동적 디스크로 또는 그 반대로 변환하는 방법을 살펴보겠습니다. 동적 디스크는 처음에는 크기가 작다가 가상 머신에 데이터를 저장함에 따라 크기가 커지는 가상 하드 디스크입니다. 동적 디스크는 필요한 만큼만 호스트 저장 공간을 차지하므로 저장 공간을 절약하는 데 매우 효율적입니다. 그러나 디스크 용량이 늘어나면 컴퓨터 성능이 약간 영향을 받을 수 있습니다. 고정 디스크와 동적 디스크는 일반적으로 가상 머신에서 사용됩니다.

Kyushu Fengshen Assassin 4S 라디에이터 리뷰 공냉식 'Assassin Master' 스타일 Mar 28, 2024 am 11:11 AM

ASSASSIN이라고 하면, 플레이어들은 확실히 "Assassin's Creed"에 나오는 암살의 대가들을 떠올릴 것이라고 생각합니다. 그들은 숙련될 뿐만 아니라 "어둠에 헌신하고 빛을 섬기는" 신념을 가지고 있습니다. 국내에서 잘 알려진 섀시/전원 공급 장치/냉각 가전 브랜드 DeepCool의 ASSASSIN 플래그십 공냉식 라디에이터 시리즈는 서로 일치합니다. 최근 이 시리즈의 최신 제품인 ASSASSIN4S가 출시되었습니다. "Assassin in Suit, Advanced"는 고급 플레이어에게 새로운 공냉식 경험을 선사합니다. 외관은 디테일이 가득합니다. Assassin 4S 라디에이터는 이중 타워 구조 + 단일 팬 내장 디자인을 채택했으며, 외부는 큐브 모양의 페어링으로 덮여 있어 전체적으로 강렬한 느낌을 줍니다. 다양한 컬러를 만나보세요.

Xiaomi Mi 14Ultra에서 4g와 5g 사이를 전환하는 방법은 무엇입니까? Feb 23, 2024 am 11:49 AM

Xiaomi 14Ultra는 올해 가장 인기 있는 Xiaomi 모델 중 하나입니다. Xiaomi 14Ultra는 프로세서와 다양한 구성을 업그레이드할 뿐만 아니라 사용자에게 많은 새로운 기능 애플리케이션을 제공합니다. 이는 Xiaomi 14Ultra 휴대폰의 판매에서 확인할 수 있습니다. 많이 사용되는 기능이지만 아직은 모르실 수도 있는 일반적으로 사용되는 기능이 있습니다. 그렇다면 Xiaomi 14Ultra는 어떻게 4g와 5g 사이를 전환합니까? 구체적인 내용을 아래에서 소개해드리겠습니다! Xiaomi 14Ultra에서 4g와 5g 사이를 전환하는 방법은 무엇입니까? 1. 휴대폰의 설정 메뉴를 엽니다. 2. 설정 메뉴에서 '네트워크' 및 '모바일 네트워크' 옵션을 찾아서 선택하세요. 3. 모바일 네트워크 설정에 '기본 네트워크 유형' 옵션이 표시됩니다. 4. 이 옵션을 클릭하거나 선택하면 다음과 같은 내용이 표시됩니다.

win11 홈 버전에서 프로페셔널 버전으로 전환하기 위한 조작 튜토리얼_win11 홈 버전에서 프로페셔널 버전으로 전환하기 위한 조작 튜토리얼 Mar 20, 2024 pm 01:58 PM

Win11 Home Edition을 Win11 Professional Edition으로 변환하는 방법 Win11 시스템은 Home Edition, Professional Edition, Enterprise Edition 등으로 나뉘며 대부분의 Win11 노트북에는 Win11 Home Edition 시스템이 사전 설치되어 있습니다. 오늘은 에디터가 win11 홈버전에서 프로페셔널 버전으로 전환하는 단계를 보여드리겠습니다! 1. 먼저, win11 바탕화면과 속성에서 이 컴퓨터를 마우스 오른쪽 버튼으로 클릭하세요. 2. 제품 키 변경 또는 Windows 업그레이드를 클릭합니다. 3. 입력 후 제품키 변경을 클릭하세요. 4. 활성화 키: 8G7XN-V7YWC-W8RPC-V73KB-YWRDB를 입력하고 다음을 선택합니다. 5. 그러면 성공이 보장되므로 win11 홈 버전을 win11 프로페셔널 버전으로 업그레이드할 수 있습니다.

봄의 절묘한 빛과 그림자 예술, Haqu H2는 비용 효율적인 선택입니다. Apr 17, 2024 pm 05:07 PM

봄이 오면 모든 것이 되살아나고 모든 것이 활력과 활력으로 가득 차 있습니다. 이 아름다운 계절에 가정 생활에 색상을 추가하는 방법은 무엇입니까? 정교한 디자인과 뛰어난 비용 효율성을 갖춘 Haqu H2 프로젝터는 올 봄에 없어서는 안 될 아름다움이 되었습니다. 이 H2 프로젝터는 콤팩트하면서도 스타일리시합니다. 거실 TV장 위에 놓거나 침실 침대협탁 옆에 놓아도 아름다운 풍경이 될 수 있습니다. 본체는 유백색 무광택 질감으로 만들어져 있어 프로젝터가 더욱 고급스러워 보일 뿐만 아니라 촉감의 편안함도 향상됩니다. 베이지색 가죽 느낌의 소재가 전체적인 외관에 따뜻함과 우아함을 더해줍니다. 이러한 색상과 소재의 조합은 현대 주택의 미적 트렌드에 부합할 뿐만 아니라 다음과 같은 인테리어에도 통합될 수 있습니다.

Apple 컴퓨터의 이중 시스템 부팅 모드 전환 Feb 19, 2024 pm 06:50 PM

Apple 컴퓨터를 시작할 때 Apple 듀얼 시스템 간을 전환하는 방법 Apple 컴퓨터는 자체 macOS 운영 체제를 실행하는 것 외에도 Windows와 같은 다른 운영 체제를 설치하도록 선택하여 듀얼 시스템 전환을 달성할 수도 있습니다. 그렇다면 부팅할 때 두 시스템 간에 어떻게 전환합니까? 이 문서에서는 Apple 컴퓨터에서 듀얼 시스템 간에 전환하는 방법을 소개합니다. 먼저 듀얼 시스템을 설치하기 전에 Apple 컴퓨터가 듀얼 시스템 전환을 지원하는지 확인해야 합니다. 일반적으로 Apple 컴퓨터는 다음을 기반으로 합니다.

Huntkey MX750P 전체 모듈 전원 공급 장치 검토: 750W의 집중된 백금 강도 Mar 28, 2024 pm 03:20 PM

ITX 플랫폼은 컴팩트한 크기로 궁극적이고 독특한 아름다움을 추구하는 많은 플레이어를 끌어 모았습니다. 제조 공정의 개선과 기술 발전으로 Intel의 14세대 Core와 RTX40 시리즈 그래픽 카드 모두 ITX 플랫폼에서 강점을 발휘할 수 있으며, 게이머 또한 SFX 전원 공급 장치에 대한 요구 사항이 더 높습니다. 게임 매니아인 Huntkey는 고성능 요구 사항을 충족하는 ITX 플랫폼에서 새로운 MX 시리즈 전원 공급 장치를 출시했습니다. MX750P 풀 모듈 전원 공급 장치는 최대 750W의 정격 전력을 가지며 80PLUS 플래티넘 레벨 인증을 통과했습니다. 아래에서는 이 전원 공급 장치에 대한 평가를 가져옵니다. Huntkey MX750P 풀 모듈 전원 공급 장치는 심플하고 패셔너블한 디자인 컨셉을 채택하고 있으며 플레이어가 선택할 수 있는 두 가지 흑백 모델이 있습니다. 둘 다 무광택 표면 처리를 사용하고 은회색과 빨간색 글꼴로 질감이 좋습니다.

See all articles

Baidu 로그인 상자의 동적 전환 효과를 구현하는 방법

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제