账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    airbnb 這個換頁的效果怎麼做的?
    93
    0

    https://www.airbnb.com.tw/hos...

    就是按下「開始吧」
    之後從左消失
    再從又出現新的右面
    沒有換頁而且很流暢
    右邊的圖也會跟著改
    這能用什麼技術實現?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 金橙橙。- 普通会员 1楼

      Airbnb 的换頁效果通常使用 JavaScript 和 CSS 来實現。以下是一個簡單的範例:

      HTML 部分:

      ```html

      Post 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet mi vel velit fringilla tincidunt. Sed ut dolor at elit tristique pretium. Nam finibus ante ac magna varius, et iaculis lectus varius.

      Post 1

      Post 2

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet mi vel velit fringilla tincidunt. Sed ut dolor at elit tristique pretium. Nam finibus ante ac magna varius, et iaculis lectus varius.

      Post 2

      Post 3

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet mi vel velit fringilla tincidunt. Sed ut dolor at elit tristique pretium. Nam finibus ante ac magna varius, et iaculis lectus varius.

      Post 3

      ```

      CSS 部分:

      ```css .page { max-width: 1200px; margin: 0 auto; }

      .post { display: flex; flex-direction: column; align-items: center; }

      .post h2 { margin-bottom: 20px; }

      .post p { margin-bottom: 10px; }

      .post img { width: 100%; height: auto; margin-bottom: 20px; } ```

      在上面的範例中,我們使用了 flexbox 布局來讓文章內容在 page 元素中垂直堆疊。每個 post 元素都有一個子元素(h2 和 p),並且子元素的高度根據其內容的垂直高度來變化。當用戶點擊 "Post 1" 或 "Post 2" 這個按鈕時,HTML 元素的 width 調整為 1200px,這樣可以使內容在頁面上更加寬大。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部