js小米4活動頁面效果實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米4活動頁面</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
        body{
            overflow: hidden;
        }
        #demo{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            background-color: #000;
        }
        #img-a{
            width: 1099px;
            height: 569px;
            background: url('img/fea-37.png') no-repeat;
            margin-top: -264px;
            margin-left: -914px;
            left: 50%;
        }
        #img-b{
            background: url('img/fea-38.png') no-repeat;
            width: 1093px;
            height: 608px;
            margin-top: -223px;
            margin-left: -184px;
            left: 50%;
        }
        #sub{
            position: absolute;
            z-index: 2;
            height: 100%;
            width: 100%;
            right: 0px;
            background-color: #fff;
            /* width: 0px; */
            overflow: hidden;
        }
        .sub-a,.sub-b,#img-b,#img-a{
            position: absolute;
            top: 50%;
        }
        .sub-a{
            width: 1102px;
            height: 566px;
            background: url('img/fea-35.png') no-repeat;
            margin-top: -262px;
        }
        .sub-b{
            width: 1096px;
            height: 607px;
            margin-top: -224px;
            background: url("img/fea-36.png") no-repeat;
        }
        #bar{
            position: absolute;
            width: 42px;
            height: 43px;
            top: 50%;
            margin-right: -21px;
            background: url("img/fea-28.png") no-repeat;
            z-index: 12;
            cursor: move;
            display: none;
        }
    </style>
</head>
<body>
    <div id="demo">
        <div id="img-a">
            
        </div>
        <div id="img-b">
            
        </div>
        <div id="sub">
            <div class="sub-a">
                
            </div>
            <div class="sub-b">
                
            </div>
        </div>
        <div id="bar">
            
        </div>
    </div>
    <script type="text/javascript">
        window.onload = function (){
            var sub = document.getElementById("sub");
            var div = sub.getElementsByTagName("div");
            var imga = document.getElementById("img-a");
            var imgb = document.getElementById("img-b");
            var bar = document.getElementById("bar");
            isMove = false;//是否拖動
            OldX = 0;
            // 初始化 位置
            sub.style.width = Width() - 80 +'px';
            div[0].style.right = Width()/2 + 914 - 1099 + 'px';
            div[1].style.right = Width()/2 + 184 - 1096 + 'px';
            bar.style.right = css(sub,"width");
            // 初始化動畫
            act(sub,"width",0,function (){
                act(sub,"width",(Width() - 80),function (){
                    bar.style.display = "block";
                })
            });
            bar.onmousedown = function (event){
                var event = event || window.event;
                isMove = true;
                OldX = event.clientX;
                return false;
            }
            document.onmousemove = function (event){
                var event = event || window.event;
                if (isMove) {
                    var dirX = event.clientX - OldX;
                    sub.style.width = sub.offsetWidth - dirX + "px";
                    bar.style.right = css(sub,"width");
                    OldX = event.clientX;
                }
                return false;
            }
            document.onmouseup = function (){
                isMove = false;
                return false;
            }
            // 獲得樣式
            function css(ele,attr){
                if (ele.currentStyle) {
                    return ele.currentStyle[attr];
                }else{
                    return getComputedStyle(ele, null)[attr];
                }
            }
            // 動畫和回調
            function act(ele,attr,target,fn){
                if (ele.timer) {
                    clearInterval(ele.timer);
                }
                ele.timer = setInterval(function (){
                    var cur = parseInt(css(ele,attr));
                    var speed = (target - cur)/5;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    ele.style[attr] = cur + speed + "px";
                    if (cur == target) {
                        clearInterval(ele.timer);
                        fn && fn();
                    }
                },30) 
            }
            // 顯示器的寬高
            function Width (){  
                return document.documentElement.clientWidth || document.body.clientWidth;
            }
            function Height(){
                return document.documentElement.clientHeight || document.body.clientHeight;
            }
        }
    </script>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容