js基礎動畫組件

一、拖拽

這裡寫圖片描述

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            window.onload = function() {
                var p2 = document.getElementById("p2");
                p.onmousedown = function(event) {
                    var e = window.event || event;
                    var oX = e.offsetX;
                    var oY = e.offsetY;
                    document.onmousemove = function(event) {
                        var ex = window.event || event;
                        p.style.left = ex.clientX - oX + "px";
                        p.style.top = ex.clientY - oY + "px";
                    }
                    document.onmouseup = function() {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                }
 
                p2.onmousedown = function(ev) {
                    var e = window.event || ev;
                    var oX = e.offsetX;
                    var oY = e.offsetY;
                    document.onmousemove = function(ev) {
                        var ex = window.event || ev;
                        p2.style.left = ex.clientX - oX + 'px';
                        p2.style.top = ex.clientY - oY + "px";
 
                    }
                    document.onmouseup = function() {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                }
            }
        </script>
 
        <style>
            #p {
                width: 100px;
                height: 100px;
                background: rgba(121, 121, 12, 0.2);
                position: absolute;
                top: 200px;
            }
 
            #p2 {
                width: 100px;
                height: 100px;
                background: rgba(121, 121, 121, 0.7);
                position: absolute;
            }
        </style>
 
    </head>
 
    <body>
 
        <p id="p">
        </p>
        <p id="p2"></p>
    </body>
 
</html>

二、輪播

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8" />
        <title>輪播</title>
        <style type="text/css">
            button{
                border:0;
                background:antiquewhite;
                width: 70px;
                height:30px;
                border-radius:5px 5px 0 0;
            }
            #back {
                width: 500px;
                height: 300px;
                /*!:卷軸相對其定位*/
                position: relative;
                /*!:隱藏視窗外*/
                overflow: hidden;
                border: 1px solid #ccc;
                box-shadow:4px 4px 6px #ccc;
            }
 
            #content {
                height: 300px;
                width: 2000px;
                position: absolute;
                /*!:第一個表示哪個屬性的過度,all標示所有css屬性*/
                transition: all .5s;
            }
 
            #content p {
                width: 500px;
                height: 300px;
                float: left;
                color:mediumaquamarine;
                font-weight:bold;
                font-size:20px;
                text-shadow:4px  4px 10px #ccc;
            }
        </style>
    </head>
 
    <body>
 
        <!--p#btns>button.btn{button}*5-->
 
        <p id="btns">
            <button id="last">上一頁</button>
            <button class="btn">button1</button>
            <button class="btn">button2</button>
            <button class="btn">button3</button>
            <button class="btn">button4</button>
            <button id="next">下一頁</button>
        </p>
 
        <!--可視區-->
        <p id="back">
            <!--背板-->
            <p id="content">
                <!--pic-->
                <p class="p">p1</p>
                <p class="p">p2</p>
                <p class="p">p3</p>
                <p class="p">p4</p>
            </p>
        </p>
 
        <script>
            //按鈕
            var last = document.getElementById("last");
            var btns = document.getElementsByClassName("btn");
            var next = document.getElementById("next");
 
            //組件
            var back = document.getElementById("back");
            var content = document.getElementById("content");
            var ps = document.getElementsByClassName("p");
 
            //顯示第幾張圖的計數器
            var index = 0;
 
            //定時器
            var timer;
 
            //卷軸寬度設置成輪播圖片總寬度
            content.style.width = ps.length * 500 + "px";
 
            //實現下一張
 
            function nextFun() {
//              index++;//1  p2
                if(index > ps.length - 1) {
                    index = 0;
                }
                //修改卷軸的left值
                content.style.left = index * 500 * -1 + "px";
                index++; // 1 
                console.log(index);
            }
            nextFun();
//          content.style.left = 0 + "px";
            timer = setInterval(nextFun, 2000);
 
            //鼠標
            content.onmouseover = function() {
                clearInterval(timer);
            }
            content.onmouseout = function() {
                timer = setInterval(nextFun, 2000);
            }
 
            //控制按鈕切換頁面
            function resetTimer() {
                clearInterval(timer);
                timer = setInterval(nextFun, 2000);
            }
 
            //下一個
            next.onclick = function() {
                    index++;
                    if(index > ps.length - 1) {
                        index = 0;
                    }
                    content.style.left = index * 500 * -1 + "px";
                    resetTimer();
                }
                //上一個
            last.onclick = function() {
                    index--;
                    if(index < 0) {
                        index = ps.length - 1;
                    }
                    content.style.left = index * 500 * (-1) + "px";
                    resetTimer();
                }
                //按鈕
            for(var i = 0; i < btns.length; i++) {
                //屬性很好添加
                btns[i].index = i;
                btns[i].onclick = function() {
                    //取出當前按鈕中index屬性值,為圖片標號
                    index = this.index;
                    content.style.left = index * 500 * -1 + "px";
                    resetTimer();
                }
            }
        </script>
    </body>
 
</html>

 

三、模態

這裡寫圖片描述

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
 
            button {
                background: mediumaquamarine;
                border: 0;
                width: 50px;
                height: 20px;
                color: bisque;
            }
 
            #page1 {
                width: 300px;
                height: 500px;
                border: 5px solid #CCCCCC;
                margin: 0 auto;
                position: relative;
            }
 
            #page2 {
                width: 300px;
                height: 500px;
                background: rgba(121, 11, 11, .2);
                position: absolute;
                top: 500px;
            }
        </style>
    </head>
 
    <body>
        <p id="page1">
            <button id="next">下一頁</button>
            <p id="page2">
                <button id="last">上一頁</button>
            </p>
        </p>
 
        <script type="text/javascript">
            var next = document.getElementById("next");
            var last = document.getElementById("last");
            var page2 = document.getElementById("page2");
 
            var speed = 1;
            //page2上升,遮擋page1
            var flag = true;
            next.onclick = function() {
                if(flag == true) {
                    flag = false;
                    console.log("下一頁進入" + flag);
                    var timer = setInterval(function() {
                        if(page2.offsetTop <= 10) {
                            clearInterval(timer);
                            flag = true;
                            console.log("下一頁結束:" + flag);
                        }
                        page2.style.top = page2.offsetTop - 10 + "px";
                    }, 10);
                }
            }
            last.onclick = function() {
                if(flag == true) {
                    flag = false;
                    console.log("上一頁剛進入:" + flag);
                    var timer = setInterval(function() {
                        if(page2.offsetTop >= 510) {
                            flag = true;
                            console.log("上一頁結束" + flag);
                            clearInterval(timer);
                        } else {
                            page2.style.top = page2.offsetTop + 10 + "px";
                        }
                    }, 10);
                }
            }
        </script>
    </body>
 
</html>

四、tab切換

這裡寫圖片描述

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
 
        button{
                border:0;
                background:antiquewhite;
                width: 70px;
                height:30px;
                border-radius:5px 5px 0 0;
            }
            .p {
                width: 500px;
                height: 300px;
                border: 1px solid #ccc;
                position: absolute;
                color:mediumaquamarine;
                font-weight:bold;
                font-size:20px;
                text-shadow:4px  4px 10px #ccc;
                box-shadow:4px 4px 10px #ccc;
            }
        </style>
    </head>
 
    <body>
        <button class="btn">button1</button>
        <button class="btn">button2</button>
        <button class="btn">button3</button>
        <button class="btn">button4</button>
 
        <p id="wrap">
            <p class="p">i am 1p</p>
            <p class="p">i am 2p</p>
            <p class="p">i am 3p</p>
            <p class="p">i am 4p</p>
        </p>
        <script type="text/javascript">
            var btns = document.getElementsByClassName("btn");
            var ps = document.getElementsByClassName("p");
 
            for(var i = 0; i < ps.length; i++) {
                ps[i].style.display = "none";
            }
            //ps[0].style.display = "block";
 
            for(var k = 0; k < btns.length; k++) {
 
                /*閉包
                 * 
                for(var j = 0; j < ps.length; j++) {
                    ps[j].style.display = "none";
                }
                (function(k) {
                    btns[k].onmouseover = function() {
                        ps[k].style.display = "block";
                    }
                    btns[k].onmouseout = function() {
                        ps[k].style.display = "none";
                    }
                })(k);
                */
                btns[k].index = k;
                btns[k].onmouseover = function() {
                    for(var j = 0; j < ps.length; j++) {
                        ps[j].style.display = "none";
                    }
                    ps[this.index].style.display = "block";
                }
                btns[k].onmouseout = function() {
                    for(var j = 0; j < ps.length; j++) {
                        ps[j].style.display = "none";
                    }
                }
 
            }
        </script>
    </body>
 
</html>

五、瀑佈流

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
 
            .wrap {
                margin: 20px auto 0;
                width: 90%;
                overflow: hidden;
            }
 
            .wrap ul {
                float: left;
                width: 24%;
                margin: 15px 0.5%;
                list-style: none;
            }
            .wrap ul img {
                width: 60%;
                height:60%;
 
            }
            .wrap ul li {
                font-size: 50px;
                text-align: center;
                background: rgba(12, 122, 11, 0.2);
                margin: 15px 0;
                box-shadow:0 0 2px 2px #ccc;
            }
        </style>
 
        <script type="text/javascript">
            var imgarr = ["1.png","2.png","3.png","4.png","5.png","6.png","7.png","8.png","9.png"];
            window.onload = function() {
                var wrap = document.getElementsByClassName('wrap')[0];
                //隨機數函數
                function random(min, max) {
                    return parseInt(Math.random() * (max - min) + min);
                }
                var uls = document.getElementsByTagName('ul');
 
                //創建li
                function creatLi(count) {
                    for(var i = 0; i < count; i++) {
                        var li = document.createElement('li');
                        var img = document.createElement('img');
                        li.appendChild(img);
                        img.src = "img/"+imgarr[i%imgarr.length];
                        li.style.height = random(200, 300) + "px";
 
                        //li拼接ul中 :高度最短的ul
                        //創建變量保存最短ul
                        var minHeightUl = uls[0];
                        for(var j = 0; j < uls.length; j++) {
                            if(minHeightUl.offsetHeight > uls[j].offsetHeight)
                                minHeightUl = uls[j];
                        }
                        minHeightUl.appendChild(li);
                    }
                }
                creatLi(60);
 
                function getScrollTop() {
                    return document.documentElement.scrollTop || document.body.scrollTop;
                }
 
                function getClinetTop() {
                    return document.documentElement.clientHeight || document.body.clientHeight || window.clientHeight;
                }
                window.onscroll = function() {
                    console.log(getScrollTop());
                    console.log(wrap.offsetHeight - getClinetTop());
                    console.log("h");
                    if(getScrollTop() >= wrap.offsetHeight - getClinetTop()) {
                        creatLi(10);
                    }
                }
            }
        </script>
 
    </head>
 
    <body>
        <p class="wrap">
            <ul></ul>
            <ul></ul>
            <ul></ul>
            <ul></ul>
        </p>
    </body>
</html>

發佈留言