9.20-9.21学习内容 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Day5</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 2px dashed #000000;
            position: relative;
        }
        .dv1{
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50px;
            left: 60px    ;

            background-color: #30ff8d;

        }
        .dv2{
            width: 200px;
            height: 200px;
            position: absolute;
            right: 80px;
            background-color: #ff68ca;
            bottom: 40px;
        }
        #angel{
            position: absolute;
        }
    </style>
</head>
<body>

    <div class     = "box">
        <div class="dv1"></div>
        <div class="dv2"></div>
    </div>
    <img src="images/tianshi.gif" alt="天使" id="angel">
    <script>
        /*
        利用定时器实现动画效果:通过每隔一点时间改变一次元素的一些样式属性，达到动画、渐变、过渡等效果
         */
    </script>
    <!-- 利用JS实现任意元素左右移动到任意位置元素移动的动画，并封装实现这一目的这个函数 见封装动画函数.html-->
    <!--轮播图案例-->

    <script>
        /*
        * 添加一个自定义属性：对象.setAttribute("属性名",属性值)
        * 获取自定义属性值：不能用.的方式,要用对象.getAttribute(属性名)
        * 克隆节点：节点.cloneNode(布尔值) 返回一个这个节点一样的节点，布尔值为true则克隆完整的节点，布尔值为false则只克隆外部，没有内容
        * */

        /*
        *用元素.style.属性只能获取标签内用style = "属性名：属性值;"里设置的属性，不能获取在头部的style标签中设置的属性
        * 用DOM元素的一个方法可以获取任意方式设置的属性：对象.offsetLeft可以获取left属性值，
        * 注意：用style.属性可以获取，也可以修改属性值，但是用offset只能获取访问，不能修改属性值。

        * 其他的还有offset方法
        * element.offsetTop
        *                 没有offsetRight和offsetBottom方法。
        * element.offsetHeight
        * element.offsetWidth
        * */
        var dv1 = document.getElementsByClassName("dv1")[0];
        var dv2 = document.getElementsByClassName("dv2")[0];
        console.log(dv1.style.top);//报错

        console.log(dv1.offsetTop);//50
        console.log(dv1.offsetLeft);//60
        console.log(dv2.offsetLeft);//220
        console.log(dv2.offsetTop);//260

        console.log(dv1.offsetHeight);//300
        console.log(dv1.offsetWidth);//300

        /*
        * offsetLeft 和offsetTop:
        * 当目标元素没有定位时，
        * 获得的left和top包括：父元素的margin,border,padding,自身的margin。不包括自身的border和padding
        *
        *当目标元素使用定位，脱离文档流时：
        * 获得的left和top包括：自身定位的left、top和自身的margin
        *
        * */





        //可以直接获取的DOM对象
        document.body;//body
        document.title;//title
        document.documentElement;//获取html




        var mousePic = document.getElementById("angel");
        console.log(mousePic);
        document.onmousemove = function (e) {
            var x = e.clientX;
            var y = e.clientY;
            console.log("x"+x);
            console.log("y"+y);
            //鼠标移动的事件函数参数中的clientX和clientY的值表示鼠标所在的可视范围的xy坐标
            mousePic.style.left = x +"px";
            mousePic.style.top = y + "px";
        }
    </script>

    <script>


    </script>
</body>
</html>

 

posted on 2018-09-21 22:24  临别一眼  阅读(99)  评论(0)    收藏  举报