9.22學習內容

時間 2019-12-14
標籤 9.22 學習內容简体版
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Day6</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .dv {
            width: 200px;
            height: 200px;
            border: 1px solid blueviolet;
            /*overflow:scroll;*/
            margin: 5px;
            padding: 10px;
        }

        #btn1 {
            position: absolute;
            left: 250px;
            top: 350px;
        }

        .top {
            height: 100px;
            background-color: #30ff8d;
        }

        .title {
            height: 100px;
            width: 100%;
            display: block;
            background-color: royalblue;
            position: relative;

            z-index: 99999;

        }

        #dv2 {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            position: relative;
        }

        #dv3 {
            width: 100px;
            height: 100px;
            background-color: #ff97d8;
            position: relative;
        }

        #dv4 {
            position: relative;
            width: 600px;
            height: 50px;
            background-color: #7daeff;
            z-index: 0;
        }

        #dv5 {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #2bff6c;
        }

        #dv6 {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #ecff28;
        }

        #dv4 span {
            display: inline-block;
            width: 100px;
            height: 50px;
            position: absolute;
            background: url(images/cloud.gif) no-repeat;
            z-index: -1;
        }

        #uu {
            width: 600px;
            height: 50px;
        }

        #uu li {
            width: 100px;
            height: 50px;
            display: inline-block;
            float: left;
            list-style: none;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            z-index: 2;

        }
    </style>
</head>
<body>
<div class="top"></div>
<div class="title">隨動模塊</div>

<div class="dv">
    捲曲測試
</div>
<input type="button" value="按鈕" id="btn1">
<br>
<br>
<div id="dv2"></div>
<input type="button" value="移動到400" id="btn2">
<input type="button" value="移動到800" id="btn3">

<br>
<br>
<br>
<div id="dv3"></div>
<input type="button" value="移動到400" id="btn4">
<input type="button" value="移動到800" id="btn5">

<br>
<br>
<br>
<div id="dv4">
    <span id="cloud"></span>
    <ul id="uu">
        <li>張全蛋</li>
        <li>麪筋哥</li>
        <li>波瀾哥</li>
        <li>藍藍路</li>
        <li>游泳教練</li>
        <li>王司徒</li>
    </ul>
</div>
<br>
<br>
<br>
<div id="dv5"></div>
<input type="button" value="往下400" id="btn6">
<input type="button" value="寬度增長" id="btn7">

<br>
<br>
<div id="dv6"></div>
<input type="button" value="改變多個屬性" id="btn8">


<script>
    /*捲曲
    * 1.offsetHeight 和 offsetWidth  包括padding和border,可是不包括margin
    * 2.scrollHeight 和 scrollWidth  包括padding不包括border更不包括margin，
    * 在內容沒有超出盒子時，scrollHeight 和scrollWidth得到的是盒子內部高度和寬度
    * 內容超出盒子時得到的是內容實際應有的高度和寬度。
    *
    *3.scrollTop 和 scrollLeft
    * 得到的是內容捲曲出去的高度和寬度，當滾動條向下拉時，內容往上走，得到的就是上面跑出盒子範圍的那部分高度。
    * 滾動條向右拉同理
    * */
    var dv = document.getElementsByClassName("dv")[0];
    var btn = document.getElementsByTagName("input")[0];

    console.log(dv.offsetHeight);   //222,說明offsetHeight包括padding和border,可是不包括margin    offsetWidth同理
    console.log(dv.scrollHeight);   //220，說明scrollHeight 包括padding不包括border，scrollWidth同理

    btn.onclick = function () {
        dv.style.overflow = "scroll";
        dv.innerHTML = "時維九月</br>序屬三秋</br>潦水盡而寒潭清，煙光凝而暮山紫</br>" +
            "儼驂騑於上路，訪風景於崇阿</br>臨帝子之長洲，得天人之舊館</br>" +
            "層巒聳翠，上出重霄；飛閣流丹，下臨無地。</br>。鶴汀鳧渚，窮島嶼之縈迴；桂殿蘭宮，即岡巒之體勢。";
        console.log(dv.scrollHeight);   //293，內部overflow設置了scroll，內部有了滾動條佔了一部分距離，可是仍是超出了220，說明scrollHeight在超出時得到的是實際內容的高度
        console.log(dv.scrollWidth);        //203，內部overflow設置了scroll，內部有了滾動條佔了一部分距離
    };

    dv.onscroll = function () {       //onscroll事件，拖動滾動條事件
        console.log(dv.scrollTop);//拖動滾動條以後能夠看出數字變化
    };
</script>

<script>
    /*
    * 獲取瀏覽器向上捲曲出的距離：
    * 根據瀏覽器兼容性分爲三個方法：window.pageYOffset     document.documentElement.scrollTop      document.body.scrollTop
    * 要寫兼容代碼
    * */
    function getScroll() {
        // var Obj = {} //返回一個對象，裏面的屬性爲向上捲曲的距離和向左捲曲的距離
        // obj.top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        // obj.left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
        // return obj;
        return {
            top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
            left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
        }
    }

    //測試
    var tit = document.getElementsByClassName("title")[0];
    window.onscroll = function () {
        console.log(getScroll().top);
        if (getScroll().top > 100) {
            tit.style.position = "fixed";
            tit.style.top = 0;

        } else {
            tit.style.position = "relative";    //能正常歸位
        }

        // if(getScroll().top>100){
        //     tit.style.top = getScroll().top - 100 +"px";
        //
        // }else{
        //     tit.style.top = 0;    //能正常歸位
        // }
    };

</script>

<script>
    //移動的函數
    function move(element, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var current = element.offsetLeft;
            var temp = 10;
            temp = target > current ? temp : -temp;
            current += temp;
            if (Math.abs(target - current) > Math.abs(temp)) {
                element.style.left = current + "px";
            } else {
                clearInterval(element.timeId);
                element.style.left = target + "px";
            }
        }, 10);
    }

    var btn2 = document.getElementById("btn2");
    var btn3 = document.getElementById("btn3");
    var dv2 = document.getElementById("dv2");
    btn2.onclick = function () {
        move(dv2, 400);
    }
    btn3.onclick = function () {
        move(dv2, 800);
    }
</script>
<script>
    /*
    * 由快到慢的移動效果：讓每次移動的距離 = 距離/10
    *   若是是正數向上取整，若是是負數向下取整
    *   當距離愈來愈近時，每次移動的距離就愈來愈小，直到每次移動1直到目標位置
    *
    *
    *
    * */
    function slowMove(element, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var current = element.offsetLeft;
            var temp = (target - current) / 10;     //設置每次走得距離
            temp = target > current ? Math.ceil(temp) : Math.floor(temp);    //Math.ceil向上取整 Math.floor向下取整
            current += temp;
            element.style.left = current + "px";
            if (target == current) {
                clearInterval(element.timeId);//到達清理定時器
                //這種移動方式絕對會到達目標位置，因此不須要判斷距離
            }
            //測試
            //console.log("target" + target + " current" + current + " temp" + temp);
        }, 30);
    }

    var btn4 = document.getElementById("btn4");
    var btn5 = document.getElementById("btn5");
    var dv3 = document.getElementById("dv3");
    btn4.onclick = function () {
        slowMove(dv3, 400);
    }
    btn5.onclick = function () {
        slowMove(dv3, 800);
    }
</script>

<script>
    //筋斗雲案例
    var list = document.getElementById("uu").children;
    var cloud = document.getElementById("cloud");

    for (var i = 0; i < list.length; i++) {
        //循環註冊事件
        //鼠標進入
        list[i].onmouseover = mouseoverHandle;
        //鼠標離開
        list[i].onmouseout = mouseoutHandle;
        //點擊
        list[i].onclick = mouseClick;
    }

    function mouseoverHandle() {
        slowMove(cloud, this.offsetLeft);
    }

    function mouseoutHandle() {
        slowMove(cloud, lastPosition);//每次離開回到上次的位置
    }

    var lastPosition = 0;

    function mouseClick() {
        lastPosition = this.offsetLeft; //點擊時保存此次的位置
    }
</script>

<script>
    /*
    * 獲取元素全部的CSS樣式：
    * window.getComputedStyle(對象，null)返回一個對象，裏面爲對象的CSS樣式 //谷歌火狐
    * 對象.currentStyle返回一個對象，裏面爲對象的CSS樣式     IE8
    *
    *能夠用次方法獲取任意對象的任意CSS屬性，獲取獲得的對象只讀，不能夠用這個方法修改樣式信息
    * 兼容代碼以下
    * */
    // console.log( window.getComputedStyle(dv3,null));
    // console.log( dv3.currentStyle(dv3,null));

    function getStyle(element, attribute) {
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attribute] : element.currentStyle[attribute];
    }

    console.log(getStyle(dv3, "backgroundColor"));
</script>

<script>
    /*
    * 能夠設置任意一個屬性的函數
    * */
    function getStyle(element, attribute) {
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attribute] : element.currentStyle[attribute];
    }

    function attrChange(element, attribute, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var current = parseInt(getStyle(element, attribute));//獲得當前的屬性值,並轉化爲數字類型
            var temp = (target - current) / 10;     //設置每次改變得距離
            temp = target > current ? Math.ceil(temp) : Math.floor(temp);    //Math.ceil向上取整 Math.floor向下取整
            current += temp;
            element.style[attribute] = current + "px";//設置屬性
            if (target == current) {
                clearInterval(element.timeId);//到達清理定時器
                //這種移動方式絕對會到達目標位置，因此不須要判斷距離
            }
            //測試
            //console.log("target" + target + " current" + current + " temp" + temp);
        }, 30);
    }

    var btn6 = document.getElementById("btn6");
    var btn7 = document.getElementById("btn7");
    var dv5 = document.getElementById("dv5");
    btn6.onclick = function () {
        attrChange(dv5, "top", 400);
    };
    btn7.onclick = function () {
        attrChange(dv5, "width", 800);
    }
</script>

<script>
    /*
    * 能夠設置任意多個屬性值
    * 設置一個屬性須要傳入一個屬性以及目標值
    * 設置多個屬性則須要傳入多個屬性及對應的目標值
    * 能夠傳入一個對象:對象裏包含多個鍵值對
    *
    * */
    function getStyle(element, attribute) {
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attribute] : element.currentStyle[attribute];
    }

    function attrsChange(element, json) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            //for in 遍歷對象,將每一個屬性都移動到目標位置
            var flag = true;//假設所有到達
            for (attr in json) {
                var current = parseInt(getStyle(element, attr));//獲得當前的屬性值,並轉化爲數字類型
                var target = json[attr];//得到目標值
                var temp = (target - current) / 10;     //設置每次改變得距離
                temp = target > current ? Math.ceil(temp) : Math.floor(temp);    //Math.ceil向上取整 Math.floor向下取整
                current += temp;
                element.style[attr] = current + "px";//設置屬性
                // if (target == current) {
                //     clearInterval(element.timeId);//這裏的清理定時器不能放在for in內部了，由於當一個屬性完成的時候就會觸發他
                //而此時其餘屬性可能還沒達到目標值
                if (current != target) {//遍歷過程當中判斷每一個屬性的current與target是否相等，只要存在一個不相等，就flag爲false，
                    flag = false;
                }
            }
            //完成遍歷以後判斷flag
            if (flag) {
                clearInterval(element.timeId);
            }


            //測試
            //console.log("target" + target + " current" + current + " temp" + temp);
        }, 30);
    }

    var btn8 = document.getElementById("btn8");
    var dv6 = document.getElementById("dv6");
    btn8.onclick = function () {
        var json = {"width": 200, "height": 300, "top": 80, "left": 40};
        attrsChange(dv6, json);
    };

</script>


</body>
</html>
1. 學習內容
2. Linux學習內容
3. 9.28學習內容
4. 9.23學習內容
5. js學習內容
6. SEO 學習內容
7. 7.29學習內容
8. Es6 學習內容
9. 待學習內容
10. MongoDB內容學習
更多相關文章...
• 您已經學習了 XQuery，接下來該學習什麼內容呢？ - XQuery 教程
• 您已經學習了 Web Services, 下一步學習什麼內容呢？ - Web Services 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。