JS 從屏幕上下左右滑入滑出效果

-Advertisement-

從屏幕上下左右滑入滑出效果，代碼比較粗糙，但是效果已實現需要註意的是，從屏幕右邊和下邊滑入的時候，需要給滑動的容器外面再加一個容器，加樣式 position: fixed; 讓它固定定位，否則頁面右邊和底部會出現滾動條主要使用了 css animate 屬性 <!DOCTYPE html> < ...

從屏幕上下左右滑入滑出效果，代碼比較粗糙，但是效果已實現

需要註意的是，從屏幕右邊和下邊滑入的時候，需要給滑動的容器外面再加一個容器，加樣式 position: fixed; 讓它固定定位，否則頁面右邊和底部會出現滾動條

主要使用了 css animate 屬性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JS 屏幕滑入滑出</title>
    <style>
        .Left {
            width: 250px;
            border: 1px dashed red;
            background-color: aquamarine;
            position: absolute;
            transition: all 1s;
            left: -260px;
            top: 400px;
        }

        .Right {
            width: 250px;
            border: 1px dashed red;
            background-color: aquamarine;
            position: absolute;
            transition: all 1s;
            right: -260px;
            top: 400px;
        }

        #main {
            width: 100%;
            position: fixed;
        }

        #up {
            width: 250px;
            border: 1px dashed red;
            background-color: aquamarine;
            position: absolute;
            transition: all 1s;
            top: -144px;
            left: 600px;
        }

        #down {
            width: 250px;
            border: 1px dashed red;
            background-color: aquamarine;
            position: absolute;
            transition: all 1s;
            bottom: -173px;
            left: 600px;
        }

        #mainDown {
            position: fixed;
            bottom: 0;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <input type="button" value="滑出" style=" width: 85px; height: 33px;" onclick="btnOut();" />
    <input type="button" value="滑入" style=" width: 85px; height: 33px;" onclick="btnIn();" />

    <div class="Left">
        <ul>
            <li>左邊列表</li>
            <li>左邊列表</li>
            <li>左邊列表</li>
            <li>左邊列表</li>
        </ul>
        <span onclick="btnIn();">關閉</span>
    </div>

    <div id="main">
        <div class="Right">
            <ul>
                <li>右邊列表</li>
                <li>右邊列表</li>
                <li>右邊列表</li>
                <li>右邊列表</li>
            </ul>
            <span onclick="btnIn();">關閉</span>
        </div>
    </div>

    <div id="up">
        <ul>
            <li>上邊列表</li>
            <li>上邊列表</li>
            <li>上邊列表</li>
            <li>上邊列表</li>
        </ul>
        <span onclick="btnIn();">關閉</span>
    </div>

    <div id="mainDown">
        <div id="down">
            <ul>
                <li>下邊列表</li>
                <li>下邊列表</li>
                <li>下邊列表</li>
                <li>下邊列表</li>
            </ul>
            <span onclick="btnIn();">關閉</span>
        </div>
    </div>
    <script>
        function btnOut() {
            $(".Left").animate({}, 1500, function () {
                $(".Left").css({ "left": "100px" });
            });

            $(".Right").animate({}, 1500, function () {
                $(".Right").css({ "right": "100px" });
            })

            $("#up").animate({}, 1500, function () {
                $("#up").css({ "top": "50px" });
            });

            $("#down").animate({}, 1500, function () {
                $("#down").css({ "bottom": "50px" });
            });
        }

        function btnIn() {
            $(".Left").animate({}, 1500, function () {
                $(".Left").css({ "left": "-260px" });
            });

            $(".Right").animate({}, 1500, function () {
                $(".Right").css({ "right": "-260px" });
            })

            $("#up").animate({}, 1500, function () {
                $("#up").css({ "top": "-144px" });
            });

            $("#down").animate({}, 1500, function () {
                $("#down").css({ "bottom": "-144px" });
            });
        }
    </script>
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

記錄--瀏覽器渲染流程解析

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助大家可能經常會聽到 css 動畫比 js動畫性能更好這樣的論斷，或者是“硬體加速”，“層提升” 這樣的字眼；要瞭解這些內容就需要對瀏覽器的渲染流程有個大致的瞭解，本文就是我個人對這些內容的一個總結梳理需要註意的是：本文僅個人學習總結梳 ...
sass的幾種輸出格式，你都知道嗎

Sass編譯輸出的CSS格式可以自定義。有4種輸出格式： - :nested – 嵌套格式 - :expanded – 展開格式 - :compact – 緊湊格式 - :compressed – 壓縮格式 ...
前端需要的免費線上api介面

回想當年剛接觸前端，Ajax 真的碰一次就跪一次。當時不懂後端，不知道 api 是什麼東東，也沒有後端小伙伴寫介面給我測試。本文整理了我用過的幾個免費的線上api介面，而且不需要處理跨域等問題。希望能給剛入門的前端小白在學習 Ajax 時提供一點幫助。本文列舉的線上介面包括：文本和圖片。 ...
CSS之行內元素排列之間的縫隙問題及解決方案

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewp ...
公眾號 H5 測試號註冊和授權獲取code 前端部分

@(公眾號測試號H5授權《前端》) Tips：因為申請公眾號需要 ¥300。 so 我用的是測試號。【白嫖永遠不虧】需要註意的是測試號是和個人微信號關聯起來的，不是公眾號主體關聯。。也就是每個人都可以申請，而不是必須有公眾號主題才可以。測試號和公眾號是獨立的。一、前置準備-註冊配置測試賬號 1 ...
CSS進階內容——盒子和陰影詳解

CSS進階內容在學習了CSS基本知識之後，我們需要進一步瞭解CSS，因此寫下了這篇文章當然如果沒有學習之前的知識，可以到我的主頁中查看之前的文章：秋落雨微涼 - 博客園 CSS三大特性首先我們先來瞭解CSS的三大特點，以便於我們下麵知識點的講解 CSS三大特性包括：層疊性繼承性優先順序層 ...
webpack版本不一至導致的 Uncaught TypeError:n is not a function at window.webpackJsonp 錯誤

經查，發現我們開發的程式是用webpack打包發佈的，而該頁面在微信小程式打開時，對方註入了幾個微信相關的js腳本，而該腳本也是使用webpack打包生成的。雙方的js代碼導致window.webpackJsonp 被重覆定義。當兩者的webpack版本不同時，生成的 window.webpack ...
基於SqlSugar的開發框架循序漸進介紹（11）-- 使用TypeScript和Vue3的Setup語法糖編寫頁面和組件的總結

隨著Vue3和TypeScript的大浪潮不斷襲來，越來越多的Vue項目採用了TypeScript的語法來編寫代碼，而Vue3的JS中的Setup語法糖也越來越廣泛的使用，給我們這些以前用弱類型的JS語法編寫Vue代碼的人不少衝擊，不過隨著大量的學習和代碼編寫，經歷過一段難熬的時間後，逐步適應了這種... ...