JS-特效～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条

楼层跳跃

100%子盒子会继承父盒子的宽高。父盒子继承body宽高。Body继承html的宽高。

盒子属性：auto:适应盒子自身的宽度或者高度。（对自己负责）

盒子属性：100%:适应盒子父盒子的宽度或者高度。（对爸爸负责）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,html {
            height: 100%;
        }
        ul {
            list-style: none;
            height: 100%;
        }
        ul li {
            height: 100%;
        }
        ol {
            list-style: none;
            position: fixed;
            top: 80px;
            left: 50px;
        }
        ol li {
             50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            line-height: 50px;
            margin-top: -1px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <ul>
        <li>鞋子区域</li>
        <li>袜子区域</li>
        <li>裤子区域</li>
        <li>裙子区域</li>
        <li>帽子区域</li>
    </ul>
     <iframe src="04-鼠标跟随.html" frameborder="20px" style="margin-top: 100px"></iframe>

    <ol>
        <li>鞋子</li>
        <li>袜子</li>
        <li>裤子</li>
        <li>裙子</li>
        <li>帽子</li>
    </ol>
    
    <script src="animate.js"></script>
    <script>
        //需求：点击ol中的li，屏幕滑动到对应的ul中的li的范围。
        //思路：还是利用window.scrollTo();利用缓动动画原理实现屏幕滑动。
        //步骤：
        //0.获取元素
        //1.指定ul和ol中的li的背景色，对应的li背景色相同
        //2.老三步。(获取元素并绑定事件)
        //3.利用缓动动画原理实现屏幕滑动
        //4.用scroll事件模拟盒子距离最顶端的距离。

        //0.获取元素
        var ul = document.getElementsByTagName("ul")[0];
        var ol = document.getElementsByTagName("ol")[0];
        var ulLiArr = ul.children;
        var olLiArr = ol.children;
        var target = 0;var leader = 0;var timer = null;
        //1.指定ul和ol中的li的背景色，对应的li背景色相同
        //设置一个数组，里面装颜色，然指定的颜色给数组中的指定元素
        var arrColor = ["pink","blue","yellow","orange","green"];
        //利用for循环给两个数组的元素上色
        for(var i=0;i<arrColor.length;i++){
            //上色
            ulLiArr[i].style.backgroundColor = arrColor[i];
            olLiArr[i].style.backgroundColor = arrColor[i];


            //属性绑定索引值
            olLiArr[i].index = i;
            //2.老三步。(并绑定事件)循环绑定，为每一个li绑定点击事件
            olLiArr[i].onclick = function () {
                //***获取目标位置
                    //获取索引值。
                target = ulLiArr[this.index].offsetTop;

                //要用定时器，先清除定时器
                clearInterval(timer);
                //3.利用缓动动画原理实现屏幕滑动
                timer = setInterval(function () {
                    //(1).获取步长
                    var step = (target-leader)/10;
                    //(2).二次处理步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    //(3).屏幕滑动
                    leader = leader + step;
                    window.scrollTo(0,leader);
                    //(4).清除定时器
                    if(Math.abs(target-leader)<=Math.abs(step)){
                        window.scrollTo(0,target);
                        clearInterval(timer);
                    }
                },25);
            }
        }

        //4.用scroll事件模拟盒子距离最顶端的距离。
        window.onscroll = function () {
            //每次屏幕滑动，把屏幕卷去的头部赋值给leader,模拟获取显示区域距离顶部的距离
            leader = scroll().top;
        }

    </script>


</body>
</html>

楼层跳跃

事件对象：

　　在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。

比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。（类似Date）

普通浏览器支持 event（带参，任意参数）

ie 678 支持 window.event（无参，内置）

总结：他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。

事件对象的获取 event的获取：

　　IE678中，window.event

在火狐谷歌中，event或者，在事件绑定的函数中，加参，这个参数就是event.

Box.onclick = function (aaa){ aaa就是event }

获取方式有两种：

　　不写参数直接获取；

　　var event = event || window.event;(主要用这种)

event的部分重要内容

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         body {
 8             height: 5000px;
 9         }
10         img {
11             position: absolute;
12             padding: 10px 0;
13             border: 1px solid #ccc;
14             cursor: pointer;
15         }
16     </style>
17 </head>
18 <body>
19     <img src="images/img.jpg" width="100"/>
20        <script>
21         //需求：点击页面的任何地方，图片跟随鼠标移动到点击位置。
22         //思路：获取鼠标在页面中的位置，然图片缓慢运动到鼠标点击的位置。
23         //  兼容ie67做pageY和pageX；
24         //  原理：     鼠标在页面的位置 = 被卷去的部分+可视区域部分。
25         //步骤：
26         //1.老三步。
27         //2.获取鼠标在页面中的位置。
28         //3.利用缓动原理，慢慢的运动到指定位置。（包括左右和上下）
29 
30         //1.老三步。
31         var img = document.getElementsByTagName("img")[0];
32         var timer = null;
33         var targetx = 0;var targety = 0;
34         var leaderx = 0;var leadery = 0;
35         //给整个文档绑定点击事件获取鼠标的位置。
36         document.onclick = function (event) {
37             //新五步
38             //兼容获取事件对象
39             event = event || window.event;
40             //鼠标在页面的位置 = 被卷去的部分+可视区域部分。
41             var pagey = event.pageY || scroll().top + event.clientY;
42             var pagex = event.pageX || scroll().left + event.clientX;
43 
44             //要用定时器，先清定时器
45 //            targety = pagey-img.offsetHeight/2;
46 //            targetx = pagex-img.offsetWidth/2;
47             targety = pagey-30;
48             targetx = pagex-50;
49             clearInterval(timer);
50             timer = setInterval(function () {
51                 //为盒子的位置获取值
52                 leaderx = img.offsetLeft;
53                 //获取步长
54                 var stepx = (targetx-leaderx)/10;
55                 //二次处理步长
56                 stepx = stepx>0?Math.ceil(stepx):Math.floor(stepx);
57                 leaderx = leaderx + stepx;
58                 //赋值
59                 img.style.left = leaderx + "px";
60 
61 
62                 //为盒子的位置获取值
63                 leadery = img.offsetTop;
64                 //获取步长
65                 var stepy = (targety-leadery)/10;
66                 //二次处理步长
67                 stepy = stepy>0?Math.ceil(stepy):Math.floor(stepy);
68                 leadery = leadery + stepy;
69                 //赋值
70                 img.style.top = leadery + "px";
71                 //清定时器
72 
73 //                if(Math.abs(targety-img.offsetTop)<=Math.abs(stepy) && Math.abs(targetx-img.offsetLeft)<=Math.abs(stepx)){
74 //                    img.style.top = targety + "px";
75 //                    img.style.left = targetx + "px";
76 //                    clearInterval(timer);
77 //                }
78             },30);
79         }
80         //2.获取鼠标在页面中的位置。
81         //3.利用缓动原理，慢慢的运动到指定位置。（先左右后上下）
82 
83 
84     </script>
85 
86 
87 
88 </body>
89 </html>

图片缓动到鼠标位置

screenX、pageX和clientX的区别

pageY/pageX ：鼠标位于整个网页页面的顶部和左侧的距离（页面）

screenY/screenX：鼠标位于屏幕的上方和左侧的距离（屏幕）

clientX／clientY：鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

pageY和pageX的兼容写法：

　　在页面的位置=看的见的+看不见的部分；

　　pageY／pageX = event.clientY+scroll().top/scroll().left

function scroll() {  // 开始封装自己的scrollTop
    if(window.pageYOffset != null) {  // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return {   // 未声明 DTD
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

新事件：onmousemove 鼠标移动

　　　　onmouseenter:鼠标进入

　　　　onmouseleave:鼠标离开

只要鼠标在绑定该事件的事件源上移动，哪怕1像素，也会触动这个事件。

（这个事件可以直接或者间接的替代定时器）

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


            var box = document.getElementsByClassName("box")[0];
            var small =  box.firstElementChild||box.firstChild ;
            var big = box.children[1];
            var mask = small.lastElementChild || box.lastChild ;
            var bigImg = big.children[0];
//            console.log(mask);

            small.onmouseenter = function () {
                show(mask);
                show(big);
            };
            small.onmouseleaver = function () {
                hide(mask);
                hide(big);
            };

            small.onmousemove = 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 - mask.offsetWidth/2 ;
                var y = pagey - box.offsetTop - mask.offsetHeight/2 ;

                // 限制黄盒子的范围
                if (x<0){
                    x = 0 ;
                }
                if(x>small.offsetWidth - mask.offsetWidth){
                    x = small.offsetWidth - mask.offsetWidth;
                }
                if (y<0) {
                    y = 0;
                }
                if (y>small.offsetHeight - mask.offsetHeight){
                    y = small.offsetHeight - mask.offsetHeight;
                }

                mask.style.left = x +"px";
                console.log(x)
                console.log(small.offsetLeft)
                console.log(mask.offsetWidth)
                console.log()
                console.log()
                console.log()
                mask.style.top = y +"px";

                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>

放大镜

大图片／大盒子 = 小图片／显示部分

<!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 {
             400px;
            height: 300px;
            border: 5px solid #eee;
            box-shadow: 2px 2px 2px 2px #666;
            position: absolute;
            top: 40%;
            left: 40%;
        }

        .hd {
             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>

拖拽案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
             300px;
            height: 500px;
            border: 1px solid red;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        .scroll {
             20px;
            height: 530px;
            background-color: #ccc;
            position: absolute;
            top: 0;
            right: 0;
        }
        .bar {
             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; // 此时pagey 相当于bar.offsetTop

                    //限制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>

模拟滚动条