原生JS實現分享側邊欄

本文分享一個用原生實現的分享側邊欄，實現效果如下：

原生JS實現分享側邊欄

以下是程式碼實現，方便大家複製貼上。

<!DOCTYPE html>
<html>
 
<head lang="en">
    <meta charset="UTF-8">
    <title>分享到效果</title>
    <style>
        #share {
            position: fixed;
            width: 100px;
            height: 200px;
            background-color: lightblue;
            left: -100px;
            top: 100px;
        }
 
        #share span {
            width: 20px;
            height: 60px;
            line-height: 20px;
            text-align: center;
            left: 100px;
            top: 70px;
            position: absolute;
            background-color: yellow;
        }
    </diRnbzlwrt 
style>
 
</head>
 
<body>
 
    <div id="share">
        <span>分享到</span>
    </div>
 
    www.cppcns.com<script>
        // 獲取元素
        var share = document.getElementById("share");
        // 將事件設定給share
        share.onmouseover = function () {
            animate(this,"left",0);
        };
        share.onmouseout = function () {
            animate(this,-100);
        };
 
        // animate運動函式
        function animate(tag,attr,target) {
            clearInterval(tag.timer);
            tag.timer = setInterval(function () {
 
                // 獲取某個屬性的當前狀態
          
       // 由於具有單位，需要取整
                // parseInt("hehe") => NaN    NaN || 0
                // 為了應對auto轉換為NaN的問題，我們使用短路操作，保證程式的健壯性
                var leader = parseInt(getStyle(tag,attr)) || 0;
 
                // 緩動公式的一部分是更改step的值
                var step = (target - leader) / 10;
 
                // 由offsetLeft在取值的時候會四捨五入，step如果比較小，會造成無法運動的問題
                // 根據步數的正負，更改取整方式
                 
step = step > 0 ? Math.ceil(step) : Math.floor(step);
 
                // 緩動公式
                leader = leader + step;
 
                // 設定給某一個屬性
                tag.style[attr] = leader + "px";
 
                // 檢測是否走到了指定位置
                if (leader == target) {
                    clearInterval(tag.timer);
                }
            },17);
        }
 
        // 用於獲取某個標籤的某個樣式屬性值
        // 帶單位
        function getStyle(tag,attr) {
            // 檢測支援哪一個
            // box.currentStyle，如果不存在值為undefined
            // getComputedStyle如果瀏覽器不支援。相當於變數未宣告，報錯
            if (tag.currentStyle) {
                // ie支援
                return tag.currentStyle[attr];
            } else {
                // 標準方法
                return getComputedStyle(tag,null)[attr];
            }
        }
 
    </script>
</body>
 
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

原生JS實現分享側邊欄

原生JS實現分享側邊欄

JS實現頁面側邊欄效果探究

javascript實現固定側邊欄

js+css實現全屏側邊欄

JS實現京東商品分類側邊欄

JS實現側邊欄點選回到指定位置的功能

js動畫函式實現側邊欄動態顯示內容

仿天貓官網主頁側邊欄導航效果（jQuery實現樓層滾動效果）

AdminLTE3動態側邊欄實現

側邊欄js樣式程式碼

案例：仿淘寶固定右側側邊欄天貓左側導航欄 js小案例

vue+elementUI元件遞迴實現可摺疊動態渲染多級側邊欄導航

Vue 動態路由的實現(後臺傳遞路由，前端拿到並生成側邊欄)

微信小程式側邊欄的實現程式碼

BBS專案分佈搭建三(個人站點時間歸檔補充，實現側邊欄跳轉、無線級分類、實現文章詳情頁展示功能)

vue實現側邊欄手風琴效果

TornadoFx實現側邊欄選單效果

原生js實現檔案上傳、下載、封裝等例項方法

原生js實現無縫輪播圖

原生JS實現留言板功能

原生JS實現分享側邊欄

相關推薦