B站JavaScript从入门到精通Blue石川老师视频部分代码_运动升级_链式运动_土豆网

本文链接：https://blog.csdn.net/qq_45801837/article/details/106336622

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>土豆网</title>
    <style type="text/css">
        *{margin: 0;padding: 0;font:12px/1.25 tahoma,arial,宋体，sans-serif;}
        li{list-style: none;}
        a{text-decoration: none;}
        body{width: 100%;height: 100%;background: #000;_position: relative;overflow: hidden;}
        .page{position: fixed;_position: absolute;right:0;bottom: 0;}
        #zns_bottom{width:201px;height:50px;background: #d8b9c3;position: absolute;right:-165px;bottom: 0;z-index: 20001;}
        #nav{height: 22px;margin: 5px 0 0 34px; width: 175px;}
        #nav li{float: left;width:25px;margin-right: 5px;}
        #nav li a{display: block;height: 25px;width:25px;}
        #nav .li_1 .show,#nav .li_1 a{background:url(人事-线.png) no-repeat;}
        #nav .li_2 .show,#nav .li_2 a{background:url(添加-线.png) no-repeat;}
        #nav .li_3 .show,#nav .li_3 a{background:url(讨论-线.png) no-repeat;}
        #nav .li_4 .show,#nav .li_4 a{background:url(邮箱-线.png) no-repeat;}
        #nav .li_5 .show,#nav .li_5 a{background:url(项目-线.png) no-repeat;}
        #nav .li_1 .show,#nav .li_1 a:hover{background:url(人事-面.png) no-repeat;}
        #nav .li_2 .show,#nav .li_2 a:hover{background:url(添加-面.png) no-repeat;}
        #nav .li_3 .show,#nav .li_3 a:hover{background:url(讨论-面.png) no-repeat;}
        #nav .li_4 .show,#nav .li_4 a:hover{background:url(邮箱-面.png) no-repeat;}
        #nav .li_5 .show,#nav .li_5 a:hover{background:url(项目-面.png) no-repeat;}
        .zns{color:#363062;height: 16px;margin:4px 0 0 140px;overflow: hidden;width: 160px;}
        #but{bottom: 0;display: block;height: 50px;position: absolute;right: 0;width: 33px;z-index: 20002;}
        .but_show{background: #d8b9c3 ;}
        .but_show:hover{background: #d8b9c3;}
        #zns_box{bottom: -315px;display: none;height: 315px;padding: 0 0 48px; position: absolute;right:1px;width:200px;z-index: 20000;}
        .bg{background: #363062 no-repeat 0 0;height: 315px;opacity: 0.9;position: absolute;right: 0;top:0;width: 200px;}
        .nav2_bg{bottom: 48px;height:176px;left:0;position: absolute;width: 34px;background: #827397 no-repeat 0 -139px;}
        #list_nav{background: #4d4c7d; height: 139px;left:0;position: absolute;top:0;width:34px;}
        #list_nav a{color:#ffffff;display: block;height: 27px;line-height: 25px;text-align: center;text-decoration: none;}
        #list_nav .show{color: #ff9900;}
        #list_nav a:hover{color: #ffff00;}
        .clos{background:url(关%20%20闭.png);cursor: pointer;height: 9px;position: absolute;right: 10px;top:10px;width: 9px;}
        .box_right{color:#ffffff;height: 285px;overflow: hidden;position: absolute;right: 6px;top:28px;width:150px;}
    </style>
    <script type="text/javascript" src="move.js"></script>
    <script>
        window.onload=function(){
            var obtn=document.getElementById("but");
            var obottom=document.getElementById("zns_bottom");
            var obox=document.getElementById("zns_box");
            var obtnclose=document.getElementById("btn_close");

            obtn.style.display="block";
            var initbottomright=parseInt(getStyle(obottom,"right"));
            var initboxbottom=parseInt(getStyle(obox,"bottom"));
            obox.style.display="none";

            obtn.onclick=openHandler;
            obtnclose.onclick=closeHandler;

            function  openHandler(){
                startMove(obottom,"right",0,function(){
                    obox.style.display="block";
                    startMove(obox,"bottom",0);
                });
                obtn.className="but_hide";
                obtn.onclick=closeHandler;
            }

            function closeHandler(){
                startMove(obox,"bottom",initboxbottom,function(){  //initboxbottom   -315
                    obox.style.display="none";
                    startMove(obottom,"right",initbottomright,function(){
                        obtn.className="but_show";
                    });
                });
                obtn.onclick=openHandler;
            }
        }
    </script>
</head>
<body>
<div class="page">
    <div id="zns_bottom">
        <ul id="nav">
            <li class="li_1"><a href="#"></a></li>
            <li class="li_2"><a href="#"></a></li>
            <li class="li_3"><a href="#"></a></li>
            <li class="li_4"><a href="#"></a></li>
            <li class="li_5"><a href="#"></a></li>
        </ul>
        <h2 class="zns">@卿卿</h2>
    </div>
    <a class="but_show" id="but" href="#"></a>
    <div id="zns_box">
        <div class="bg"></div>
        <div class="nav2_bg"></div>
        <ul id="list_nav">
            <li><a class="show" href="#" target="_blank">天气</a></li>
            <li class="tab2"><a class="show" href="#" target="_blank">星座</a></li>
            <li class="tab3"><a class="show" href="#" target="_blank">排行</a></li>
            <li class="tab4"><a class="show" href="#" target="_blank">热点</a></li>
            <li class="tab5"><a class="show" href="#" target="_blank">直播</a></li>
        </ul>
        <a class="clos" id="btn_close"></a>
        <div class="box_right">
            <div>北京</div>
            <div>
                <div>
                    <strong><em>今天</em>（周二）</strong>
                    <img title="晴" src="#" class="pic">
                </div>
                <span>-1~10℃</span>
                <span>晴</span>
                <span>微风小于3级</span>
            </div>
            <div>
                <div>
                    <strong><em>明天</em>（周三）</strong>
                    <img title="晴" src="#" class="pic">
                </div>
                <span>-1~10℃</span>
                <span>晴</span>
                <span>微风小于3级</span>
            </div>
            <div>
                <div>
                    <strong><em>后天</em>（周四）</strong>
                    <img title="晴" src="#" class="pic">
                </div>
                <span>-1~10℃</span>
                <span>晴</span>
                <span>微风小于3级</span>
            </div>
        </div>
    </div>

</div>
</body>
</html>

move.js

function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name];
    }
}
function startMove(obj,attr,iTarget,fnEnd){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var cur=0;
        if(attr=="opacity"){
            cur=parseFloat(getStyle(obj,attr))*100;
        }else{
            cur=parseInt(getStyle(obj,attr));
        }
        var speed=(iTarget-cur)/6;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        if(cur==iTarget){
            clearInterval(obj.timer);
            if(fnEnd)fnEnd();
        }else{
            if(attr=="opacity"){
                obj.style.filter="alpha(opacity:"+(cur+speed)+")";
                obj.style.opacity=(cur+speed)/100;
            }else {
                obj.style[attr] = cur + speed + "px";
            }
        }
    },30);
}