DOM-事件对象8

作者: charlotte2018 | 来源:发表于2017-11-15 11:14 被阅读4次

F353D145-8D92-4BE2-ACA0-67ABC6FEBED7.png

AFF6341C-65B3-4CF6-8C16-0FE9D8024C16.png

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


    <script>
        //点击页面的任何部分
         document.onclick = function (event) {
             //兼容写法
             event = event || window.event;
//            console.log(event);
            console.log(event);
            console.log(event.timeStamp);
            console.log(event.bubbles);
            console.log(event.button);
            console.log(event.pageX);
            console.log(event.pageY);
            console.log(event.screenX);
            console.log(event.screenY);
            console.log(event.target);
            console.log(event.type);
            console.log(event.clientX);
            console.log(event.clientY);

         }

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

04-鼠标跟随.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 5000px;
        }
        img {
            position: absolute;
            padding: 10px 0;
            border: 1px solid #ccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <img src="images/img.jpg" width="100"/>

    <script>
        //需求：点击页面的任何地方，图片跟随鼠标移动到点击位置。
        //思路：获取鼠标在页面中的位置，然图片缓慢运动到鼠标点击的位置。
        //  兼容ie67做pageY和pageX；
        //  原理：     鼠标在页面的位置 = 被卷去的部分+可视区域部分。
        //步骤：
        //1.老三步。
        //2.获取鼠标在页面中的位置。
        //3.利用缓动原理，慢慢的运动到指定位置。（包括左右和上下）

        //1.老三步。
        var img = document.getElementsByTagName("img")[0];
        var timer = null;
        var targetx = 0;var targety = 0;
        var leaderx = 0;var leadery = 0;
        //给整个文档绑定点击事件获取鼠标的位置。
        document.onclick = function (event) {
            //新五步
            //兼容获取事件对象
            event = event || window.event;
            //鼠标在页面的位置 = 被卷去的部分+可视区域部分。
            var pagey = event.pageY || scroll().top + event.clientY;
            var pagex = event.pageX || scroll().left + event.clientX;

            //要用定时器，先清定时器
//            targety = pagey-img.offsetHeight/2;
//            targetx = pagex-img.offsetWidth/2;
            targety = pagey-30;
            targetx = pagex-50;
            clearInterval(timer);
            timer = setInterval(function () {
                //为盒子的位置获取值
                leaderx = img.offsetLeft;
                //获取步长
                var stepx = (targetx-leaderx)/10;
                //二次处理步长
                stepx = stepx>0?Math.ceil(stepx):Math.floor(stepx);
                leaderx = leaderx + stepx;
                //赋值
                img.style.left = leaderx + "px";


                //为盒子的位置获取值
                leadery = img.offsetTop;
                //获取步长
                var stepy = (targety-leadery)/10;
                //二次处理步长
                stepy = stepy>0?Math.ceil(stepy):Math.floor(stepy);
                leadery = leadery + stepy;
                //赋值
                img.style.top = leadery + "px";
                //清定时器

//                if(Math.abs(targety-img.offsetTop)<=Math.abs(stepy) && Math.abs(targetx-img.offsetLeft)<=Math.abs(stepx)){
//                    img.style.top = targety + "px";
//                    img.style.left = targetx + "px";
//                    clearInterval(timer);
//                }
            },30);
        }
        //2.获取鼠标在页面中的位置。
        //3.利用缓动原理，慢慢的运动到指定位置。（先左右后上下）


    </script>



</body>
</html>

05-鼠标在盒子中的坐标.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box  {
            width: 300px;
            height: 200px;
            padding-top: 100px;
            background-color: pink;
            margin: 100px;
            text-align: center;
            font: 18px/30px "simsun";
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>

    <script src="animate.js"></script>
    <script>
        //需求：鼠标进入盒子之后只要移动，哪怕1像素，随时更换里面的内容。（鼠标在盒子中的坐标）
        //技术点：新事件，onmousemove.在事件源上哪怕移动1像素也会触动这个事件。
            //一定程度上，模拟了定时器
        //步骤：
        //1.老三步和新五步
        //2.获取鼠标在整个页面的位置
        //3.获取盒子在整个页面的位置
        //4.用鼠标的位置减去盒子的位置赋值给盒子的内容。

        //1.老三步和新五步
        var div = document.getElementsByTagName("div")[0];

        div.onmousemove = function (event) {
            event = event || window.event;
            //2.获取鼠标在整个页面的位置
            var pagex = event.pageX || scroll().left + event.clientX;
            var pagey = event.pageY || scroll().top + event.clientY;
            //3.获取盒子在整个页面的位置
            var xx = div.offsetLeft;
            var yy = div.offsetTop
            //4.用鼠标的位置减去盒子的位置赋值给盒子的内容。
            var targetx = pagex - xx;
            var targety = pagey - yy;
            this.innerHTML = "鼠标在盒子中的X坐标为："+targetx+"px;<br>鼠标在盒子中的Y坐标为："+targety+"px;"

        }

    </script>

</body>
</html>

07-拖拽案例.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 30px;
            background: #036663;
            border-bottom: 1px solid #369;
            line-height: 30px;
            padding-left: 30px;
        }

        .nav a {
            color: #fff;
            text-align: center;
            font-size: 14px;
            text-decoration: none;

        }

        .d-box {
            width: 400px;
            height: 300px;
            border: 5px solid #eee;
            box-shadow: 2px 2px 2px 2px #666;
            position: absolute;
            top: 40%;
            left: 40%;
        }

        .hd {
            width: 100%;
            height: 25px;
            background-color: #7c9299;
            border-bottom: 1px solid #369;
            line-height: 25px;
            color: white;
            cursor: move;
        }

        #box_close {
            float: right;
            cursor: pointer;
        }
    </style>

    <script src="animate.js"></script>
    <script>
        window.onload = function () {
            //需求：在指定位置按住鼠标左键移动对话框。
            //分析：鼠标按下，触动事件，移动在更换对话框的位置。
            //鼠标按下onmousedown   鼠标弹起:onmouseup   鼠标移动onmousemove
            //步骤：
            //1.老三步和新五步
            //2.把鼠标的坐标赋值给对话框。

            var box = document.getElementById("d_box");
            var drop = document.getElementById("drop");
            //1.老三步和新五步
            //先按下，在移动触动此事件
            drop.onmousedown = function (event) {
                //获取鼠标在盒子中的坐标，将来移动的时候减去保证鼠标在盒子的指定位置
                event = event || window.event;
                var pagex = event.pageX || scroll().left + event.clientX;
                var pagey = event.pageY || scroll().top + event.clientY;
                var x = pagex - box.offsetLeft;
                var y = pagey - box.offsetTop;


                document.onmousemove = function (event) {
                    //2.把鼠标的坐标赋值给对话框。
                    event = event || window.event;
                    var xx = event.pageX || scroll().left + event.clientX;
                    var yy = event.pageY || scroll().top + event.clientY;
                    //二次操作鼠标位置  减去鼠标在盒子中的坐标
                    xx = xx - x;
                    yy = yy - y;

                    //给box赋值
                    box.style.left = xx+"px";
                    box.style.top = yy+"px";
                    //禁止文本选中（选中后取消）
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
            }

            //事件解绑
            drop.onmouseup = function () {
                //解绑
                document.onmousemove = null;
            }


        }
    </script>

</head>
<body>
<!--顶部注册部分，无用-->
    <div class="nav">
        <a href="javascript:;" id="register">注册信息</a>
    </div>
<!--我们移动的对话框-->
    <div class="d-box" id="d_box">
        <div class="hd" id="drop">
            <i>注册信息 (可以拖拽)</i>
            <span id="box_close">【关闭】</span>
        </div>
        <div class="bd"></div>
    </div>

</body>
</html>

08-模拟滚动条.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 500px;
            border: 1px solid red;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        .scroll {
            width: 20px;
            height: 530px;
            background-color: #ccc;
            position: absolute;
            top: 0;
            right: 0;
        }
        .bar {
            width: 20px;
            background-color: red;
            border-radius: 10px;
            cursor: pointer;
            position: absolute;
            top: 0;
        }
        .content {
            padding: 15px;
        }
    </style>

    <script src="animate.js"></script>
    <script>
        window.onload = function () {
            //需求：模拟滚动条，鼠标拖动滚动条，滚动条动，而且内容等比例联动。
            //步骤：
            //1.根据内容和盒子的比例确定bar的高。
            //2.绑定事件（鼠标按下，然后移动）
            //3.鼠标移动，bar联动
            //4.内容等比例联动


            //0.获取相关元素
            var box = document.getElementById("box");
            var content = box.children[0];
            var scroll = box.children[1];
            var bar = scroll.children[0];

            //1.根据内容和盒子的比例确定bar的高。
            //内容的高/盒子的高 = scroll的高/bar的高
            //bar的高 = 盒子的高*scroll的高/内容的高
            var barHeight = box.offsetHeight*scroll.offsetHeight/content.offsetHeight;
            bar.style.height = barHeight + "px";
            //2.绑定事件（鼠标按下，然后移动）
            bar.onmousedown = function (event) {
                event = event || window.event;
                var pageyy = event.pageY || scroll().top + event.clientY;
                var y = pageyy - bar.offsetTop;
                //模拟拖拽案例
                document.onmousemove = function (event) {
                    //新五步获取鼠标在页面的位置。
                    event = event || window.event;
                    var pagey = event.pageY || scroll().top + event.clientY;
                    //鼠标的位置-鼠标在盒子中的位置。
                    pagey = pagey - y;
                    //限制y的取值。大于0，小于scroll的高度-bar的高度
                    if(pagey<0){
                        pagey = 0;
                    }
                    if(pagey>scroll.offsetHeight-bar.offsetHeight){
                        pagey = scroll.offsetHeight-bar.offsetHeight;
                    }

                    //3.鼠标移动，bar联动
                    bar.style.top = pagey + "px";

                    //4.内容等比例联动
                    //高级比例：  内容走的距离/bar走的距离 = （内容的高-大盒子的高）/（scroll的高-bar的高）
                    var s = pagey *(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
                    //s赋值给content。通过marginTop负值移动content
                    content.style.marginTop = -s+"px";

                    //让被选文字清除。
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
            }

            //事件解绑
            document.onmouseup = function () {
                document.onmousemove = null;
            }

        }
    </script>

</head>
<body>
    <div class="box" id="box">
        <div class="content">
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑梓地，人生无处不青山。<br>
            -------------结束------------<br>
        </div>
        <div class="scroll">
            <div class="bar"></div>
        </div>
    </div>



</body>
</html>

06-放大镜

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 350px;
            height: 350px;
            margin:100px;
            border: 1px solid #ccc;
            position: relative;
        }
        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }
        .small {
            position: relative;
        }
        img {
            vertical-align: top;
        }
    </style>

    <script src="animate.js"></script>
    <script>
        window.onload = function () {
            //需求：鼠标放到小盒子上，让大盒子里面的图片和我们同步等比例移动。
            //技术点：onmouseenter==onmouseover 第一个不冒泡
            //技术点：onmouseleave==onmouseout  第一个不冒泡
            //步骤：
            //1.鼠标放上去显示盒子，移开隐藏盒子。
            //2.老三步和新五步（黄盒子跟随移动）
            //3.右侧的大图片，等比例移动。

            //0.获取相关元素
            var box = document.getElementsByClassName("box")[0];
            var small = box.firstElementChild || box.firstChild;
            var big = box.children[1];
            var mask = small.children[1];
            var bigImg = big.children[0];

            //1.鼠标放上去显示盒子，移开隐藏盒子。(为小盒子绑定事件)
            small.onmouseenter = function () {
                //封装好方法调用：显示元素
                show(mask);
                show(big);
            }
            small.onmouseleave = function () {
                //封装好方法调用：隐藏元素
                hide(mask);
                hide(big);
            }

            //2.老三步和新五步（黄盒子跟随移动）
            //绑定的事件是onmousemove，而事件源是small(只要在小盒子上移动1像素，黄盒子也要跟随)
            small.onmousemove = function (event) {
                //想移动黄盒子，必须知道鼠标在small中的位置。x作为mask的left值，y作mask的top值。
                //新五步
                event = event || window.event;
                var pagex = event.pageX || scroll().left + event.clientX;
                var pagey = event.pageY || scroll().top + event.clientY;
                //让鼠标在黄盒子最中间，减去黄盒子宽高的一半
                var x = pagex - box.offsetLeft - mask.offsetWidth/2;
                var y = pagey - box.offsetTop - mask.offsetHeight/2;
                //限制换盒子的范围
                //left取值为大于0，小盒子的宽-mask的宽。
                if(x<0){
                    x = 0;
                }
                if(x>small.offsetWidth-mask.offsetWidth){
                    x = small.offsetWidth-mask.offsetWidth;
                }
                //top同理。
                if(y<0){
                    y = 0;
                }
                if(y>small.offsetHeight-mask.offsetHeight){
                    y = small.offsetHeight-mask.offsetHeight;
                }
                //移动黄盒子
                console.log(small.offsetHeight);
                mask.style.left = x + "px";
                mask.style.top = y + "px";

                //3.右侧的大图片，等比例移动。
                //如何移动大图片？等比例移动。
                //    大图片/大盒子 = 小图片/mask盒子
                //    大图片走的距离/mask走的距离 = （大图片-大盒子）/（小图片-黄盒子）
//                var bili = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);

                //大图片走的距离/mask盒子都的距离 = 大图片/小图片
                var bili = bigImg.offsetWidth/small.offsetWidth;

                var xx = bili*x;
                var yy = bili*y;


                bigImg.style.marginTop = -yy+"px";
                bigImg.style.marginLeft = -xx+"px";
            }





        }
    </script>
</head>
<body>
    <div class="box">
        <div class="small">
            <img src="images/001.jpg" alt=""/>
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="images/0001.jpg" alt=""/>
        </div>
    </div>
</body>
</html>

DOM-事件对象8

04-鼠标跟随.html

05-鼠标在盒子中的坐标.html

07-拖拽案例.html

08-模拟滚动条.html

06-放大镜

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读