右側帶返回頂部的的小導航欄

時間 2019-11-13
原文原文鏈接
效果如圖：html
懸浮改變效果微信
點擊諮詢留言ide
懸浮顯示一個div url
點擊回到頂部頁面慢慢滾動到頂部spa
所有代碼以下：code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右側導航欄</title>
    <style>
        .side-nav{
            position: fixed;
            top:50%;
            right: 20px;
        }
        .side-nav{}
        .side-nav li{
            width: 45px;
            height: 30px;
            padding: 5px;
            list-style: none;
            background: #9F9F9F;
            font-size: 20px;
            color:white;
            border: 1px solid #dddddd;
            cursor: pointer;
        }
        /*彈窗1*/
        .btn-pop{
            background-color: #ffd475;
            border-radius: 10px;
            border:0px;
            zoom:200%;

        }
        #background-pop{
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        #background-pop1{
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        #div-pop{
            background:#ffffff;
            width:30%;
            z-index: 1;
            margin: 12% auto;
            overflow: auto;
        }
        #div-pop1{
            background:#ffffff;
            width:360px;
            height: auto;
            z-index: 1;
            margin: 12% auto;
            overflow: auto;
        }
        .div-top{
            width: 100%;
            height: auto;
            background-color: #cfcfcf;
            color: #ffffff;
        }
        .div-top div{
            padding: 3px 5px 5px 8px;
        }
        .div-top span{
            color: white;
            margin-bottom: 10px ;
            padding-right: 10px ;
            cursor: pointer;
            float: right;
        }
        .div-content{

            width: auto;
            height: auto;
            overflow: auto;
        }

        .div-content ul li{
            list-style: none;
        }

        #weChatImg{

            display: none;
            position: fixed;
            top:65%;
            right: 72px;
        }
        #phoneDiv{
            display: none;
            text-align: center;
            font-size: 14px;
            color:#9F9F9F;

            position: fixed;
            top:60%;
            right: 72px;
            width:120px;
            height: 140px;
            background: url("images/contact_pig.png") no-repeat;
            background-size:cover;
            padding: 1em;
            line-height: 1.5em;
        }
        #phoneDiv span{
            text-align: left;
            color: #404040;
            width: 100%;
        }
        .advisory-btn{
            padding: 3px 10px;
            margin: 10px 0px;
            border-radius: 5px;
            border:none;
            background: #01aaed;
            color:#ffffff;
            font-size: 18px;

        }
        .contact-div{
            border: 1px solid #9F9F9F;
            height: 110px;
            border-radius: 10px;
            margin: 15px 0 15px 25px;

        }
        .contact-top{
            padding: 5px;
            background: #01aaed;
            color: white;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .contact-item{
            float: left;
            margin: 10px;
            line-height: 30px;
        }
        .contact-item img{
            margin-left:20px;
            width: 60px;
        }
    </style>
</head>
<body style="height: 5000px;background: #0C0C0C">
    <!--右側浮動導航欄-->
    <div class="side-nav">
        <ul>
            <a>
                <li>
                    <span id="item1" onmouseover="function10()"onmouseout="function11()" onclick="show()">諮詢</span>
                </li>
            </a>
            <a >
                <li>
                    <span id="item2" onmouseover="function20()"onmouseout="function21()" onclick="show1()">加盟</span>
                </li>
            </a>
            <a >
                <li>
                    <span id="item3" onmouseover="function30()"onmouseout="function31()">電話</span>
                </li>
            </a>
            <a >
                <li>
                    <span id="item4" onmouseover="function40()"onmouseout="function41()">微信</span>
                </li>
            </a>
            <a >
                <li>
                    <span id="item5" onmouseover="function50()"onmouseout="function51() "onclick="pageScroll()">頂部</span>
                </li>
            </a>
        </ul>
    </div>
    <!--諮詢提示框 1-->
    <div id="background-pop">
    <div id="div-pop">
        <div class="div-top">
            <span id="close-button">×</span>
            <div>諮詢留言</div>
        </div>
        <div class="div-content">
            <ul>
                <li class="advisory-box" >
                    <div id="advisoryRadio" type="radio" name="advisoryType" data-value="0" style=""> 諮詢留言：</div>
                    <textarea name="reportInfo" id="elmaaa" class="feedback-text" rows="15" placeholder="請留下您諮詢問題，客服會盡快給您聯繫。"style="width: 90%"></textarea>
                    <p>聯繫方式：</p>
                    <input type="text" placeholder="留個聯繫方式唄..." name="reportAddress" class="radio-text" id="reportAddress" style="height: 30px;width: 200px;">
                </li>
                <li>
                    <button class="advisory-btn">提交</button>
                </li>
            </ul>
    </div>
    </div>
    </div>
    <!--加盟諮詢提示框 2-->
    <div id="background-pop1">
        <div id="div-pop1">
            <div class="div-top">
                <span id="close-button1">×</span>
                <div>加盟諮詢</div>
            </div>
            <div class="div-content">
                <div class="contact-div">
                    <div class="contact-top">
                        區域：華北區、東北區、西北區
                    </div >
                    <div class="contact-content">
                        <div class="contact-item ">
                           聯繫人：解先生<br>
                           手機號：18916574912
                        </div>
                        <div class="contact-item ">
                            <img src="images/wechat-xie.png" />
                        </div>
                    </div>
                </div>
                <div class="contact-div">
                    <div class="contact-top">
                        區域：華南區、華中區、西南地區
                    </div >
                    <div class="contact-content">
                        <div class="contact-item ">
                            聯繫人：梁先生<br>
                            手機號：18014037816
                        </div>
                        <div class="contact-item ">




                            <img src="images/wechat-liang.png" />
                        </div>
                    </div>
                </div>
                <div class="contact-div">
                    <div class="contact-top">
                        區域：華東區、港澳臺
                    </div >
                    <div class="contact-content">
                        <div class="contact-item ">
                            聯繫人：周先生<br>
                            手機號：15050135222
                        </div>
                        <div class="contact-item ">
                            <img src="images/wechat-zhou.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--關注微信1-->
        <div id="weChatImg">
        <img src="images/wechat-bg.png">

    </div>
    <!--客服電話-->
    <div id="phoneDiv">
        <span>客服電話</span><br>
        0755-32914245
        <span>客服QQ</span><br>
        2083392091
        <hr>
        <span>手機</span>
        18014037816
    </div>
</body>
<script>
    // item1 鼠標懸浮 文本 ：諮詢--》點擊諮詢更改背景色爲藍色，
    function function10(){
        document.getElementById("item1").innerHTML="諮詢留言";
        document.getElementById("item1").parentElement.style.height="50px";
        document.getElementById("item1").parentElement.style.background="#01aaed"
    }
    function function11(){
        document.getElementById("item1").innerHTML="諮詢";
        document.getElementById("item1").parentElement.style.height="30px";
        document.getElementById("item1").parentElement.style.background="#9F9F9F"
    }
    // item2 鼠標懸浮 文本 ：加盟--》諮詢加盟更改背景色爲藍色，
    function function20(){
        document.getElementById("item2").innerHTML="諮詢加盟";
        document.getElementById("item2").parentElement.style.height="50px";
        document.getElementById("item2").parentElement.style.background="#01aaed"
    }
    function function21(){
        document.getElementById("item2").innerHTML="加盟";
        document.getElementById("item2").parentElement.style.height="30px";
        document.getElementById("item2").parentElement.style.background="#9F9F9F"
    }
    // item3 鼠標懸浮 文本 ：電話--》聯繫咱們更改背景色爲藍色 顯示電話信息，頁面，
    function function30(){
        document.getElementById("item3").innerHTML="聯繫咱們";
        document.getElementById("item3").parentElement.style.height="50px";
        document.getElementById("item3").parentElement.style.background="#01aaed"
        document.getElementById("phoneDiv").style.display="block";
    }
    function function31(){
        document.getElementById("item3").innerHTML="電話";
        document.getElementById("item3").parentElement.style.height="30px";
        document.getElementById("item3").parentElement.style.background="#9F9F9F"
        document.getElementById("phoneDiv").style.display="none";
    }
    // item4 鼠標懸浮 文本 ：微信--》關注微信更改背景色爲藍色，
    function function40(){
        document.getElementById("item4").innerHTML="關注微信";
        document.getElementById("item4").parentElement.style.height="50px";
        document.getElementById("item4").parentElement.style.background="#01aaed"
        document.getElementById("weChatImg").style.display="block";
    }
    function function41(){
        document.getElementById("item4").innerHTML="微信";
        document.getElementById("item4").parentElement.style.height="30px";
        document.getElementById("item4").parentElement.style.background="#9F9F9F";
        document.getElementById("weChatImg").style.display="none";
    }
    // item4 鼠標懸浮 文本 ：諮詢--》點擊諮詢更改背景色爲藍色，
    function function50(){
        document.getElementById("item5").innerHTML="返回頂部";
        document.getElementById("item5").parentElement.style.height="50px";
        document.getElementById("item5").parentElement.style.background="#01aaed"
    }
    function function51(){
        document.getElementById("item5").innerHTML="頂部";
        document.getElementById("item5").parentElement.style.height="30px";
        document.getElementById("item5").parentElement.style.background="#9F9F9F"
    }
    // 彈框
    var div = document.getElementById('background-pop');
    var close = document.getElementById('close-button');
    function show(){
        div.style.display = "block";
        div1.style.display = "none";
    }
    close.onclick = function close() {
        div.style.display = "none";
    }
    window.onclick = function close(e) {
        if (e.target == div) {
            div.style.display = "none";
        }
    }
    // 加盟彈框
    var div1 = document.getElementById('background-pop1');
    var close1 = document.getElementById('close-button1');
    function show1(){
        div1.style.display = "block";
        div.style.display = "none";
    }
    close1.onclick = function close() {
        div1.style.display = "none";
    }
    window.onclick = function close(e) {
        if (e.target == div){
            div1.style.display = "none";
        }
    }
    //返回頂部
    function pageScroll(){
//把內容滾動指定的像素數（第一個參數是向右滾動的像素數，第二個參數是向下滾動的像素數）
        window.scrollBy(0,-100);
//延時遞歸調用，模擬滾動向上效果
        scrolldelay = setTimeout('pageScroll()',100);
//獲取scrollTop值，聲明瞭DTD的標準網頁取document.documentElement.scrollTop，不然取document.body.scrollTop；由於兩者只有一個會生效，另外一個就恆爲0，因此取和值能夠獲得網頁的真正的scrollTop值
        var sTop=document.documentElement.scrollTop+document.body.scrollTop;
//判斷當頁面到達頂部，取消延時代碼（不然頁面滾動到頂部會沒法再向下正常瀏覽頁面）
        if(sTop==0) clearTimeout(scrolldelay);
    }
</script>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。