小刘同学的第四十九篇博文

　　事实证明是每天坚持编程是特别困难的，看看自己昨天立下的flag真的。。可能又是无法做到。

　　那个鼠标切换背景的代码可能就不去研究了，起码是今天不研究了。

　　今天是把鼠标拖动盒子的代码稍微对比了下，就暂时放在这儿吧，晚上要赶火车，必须要早点睡了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #drag{
            width: 100px;
            height: 100px;
            background-color: #abcdef;
            cursor: pointer;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="drag"></div>
    <script>
        window.onload = function(){
            var target = document.getElementById("drag");
            target.onmousedown = function(e){
                var offsetX = e.offsetX;
                var offsetY = e.offsetY;
                document.body.onmousemove = function(e){
                    target.style.left = (e.pageX-offsetX)+"px";
                    target.style.top = (e.pageY-offsetY)+"px";
                }
                document.body.onmouseup = function(){
                    document.body.onmousemove = null;
                    document.body.onmouseup = null;
                }
            }
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework4</title>
    <style>
        html, body{
            margin: 0;
            padding: 0;
            width: 100%;
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .bg {
            height: 100vh;
            width: 100%;
            display: none;
        }
    </style>
</head>
<body>
<!-- 
/**
 * 
 * @author: xiaoliu
 * @type: NO.17-homework4
 * @data: 2018-01-27
 * @finished: 2018-01-29
 * @optimized: 2018-01-31
 */
-->
<ul id="main">
    <li class="bg" id="one"></li>
    <li class="bg" id="two"></li>
    <li class="bg" id="three"></li>
    <li class="bg" id="four"></li>
    <li class="bg" id="five"></li>
    <li class="bg" id="six"></li>
    <li class="bg" id="seven"></li>
</ul>
<script>
    window.onload = function () {
        // count用来存放当前显示的li标签
        var count = 0;
        var bg = document.getElementsByTagName("li");
        // 初始化bgColor
        bg[0].style.backgroundColor = "red";
        bg[1].style.backgroundColor = "orange";
        bg[2].style.backgroundColor = "yellow";
        bg[3].style.backgroundColor = "green";
        bg[4].style.backgroundColor = "cyan";
        bg[5].style.backgroundColor = "blue";
        bg[6].style.backgroundColor = "purple";
        // 显示默认标签     
        // propertypropertyproperty  property
        bg[count].style.display = "block";
        window.onmousewheel = function (event) {
            if (event.wheelDelta < 0 && count < bg.length-1) {
                // 如果滚轮的值为-120，就把标志往后移1位
                count++;
                // console.log("count :" + count)
            } else if (event.wheelDelta > 0 &&count > 0) {
                // 如果滚轮的值为120，就把标志往前移1位
                count--;
            }
            
            bg[count].style.display = "block";
            for (var i = 0; i < bg.length; i++) {
                //跳过当前count标志位，不让其none掉
                //而且i不能超过7，i∈[0, 6]
                if (i === count) {
                    i++;
                    // console.log("i :" + i)
                }
                // 等于7的时候前0~6总共的7个背景已经
                if (i!= bg.length) {
                    bg[i].style.display = "none";
                }
            }
        }
    }
</script>
</body>
</html>

　　前面是老师写的代码，后面是自己写的代码。。。

　　果然技术菜是有原因的，很多东西不会主动地去查证、或是去实验。。。。

　　晚上12点还得起来赶火车，溜了溜了。

　　大家晚安，千万要坚持学习，别像我一样o(╥﹏╥)o

 

posted @ 2018-02-10 20:32  小刘-  阅读(187)  评论(2)    收藏  举报