登录
当前位置： 首页 > 工具软件 > fcup.js > 使用案例 >

Javascript使用三大家族和事件来DIY动画效果相关笔记（四）

昌勇锐
2023-12-01

1.图片轮播基础之缓速轮播

◆使用封装的缓慢速动画来DIY滑动轮播图，也就是鼠标移动到123456这些数字上后，图片以缓慢速滑动的方式进行切换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用封装的缓速动画制作滑动轮播图</title>
    <style type="text/css">

        body, ul, li, div, span, img {
            padding: 0;
            margin: 0;
        }

        img {
            border: 0 none;
            vertical-align: top;
        }

        .box {
            width: 490px;
            height: 170px;
            padding: 5px;
            border: 1px solid #f09;
            margin: 100px auto;
        }

        .inner {
            width: 490px;
            height: 170px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        ul {
            list-style: none;
            width: 500%;
            position: absolute;
            left: 0;
        }

        li {
            width: 490px;
            height: 170px;
            float: left;
        }

        .square {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        .square span {
            display: inline-block;
            width: 16px;
            height: 16px;
            line-height: 14px;
            border: 1px solid #ccc;
            background-color: #fff;
            text-align: center;
            margin-left: 5px;
            cursor: pointer;
        }

        .square .current {
            background-color: #f00;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="inner" id="inner">
        <ul>
            <li><img src="images1/01.jpg"></li>
            <li><img src="images1/02.jpg"></li>
            <li><img src="images1/03.jpg"></li>
            <li><img src="images1/04.jpg"></li>
            <li><img src="images1/05.jpg"></li>
        </ul>
        <div class="square">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
    </div>
</div>
<script>
    //需求：当鼠标移动指定的索引时，切换到对应索引的图片（缓速动画）
    //思路：当鼠标移动到指定的索引时，图片移动的距离（-索引*某张图片的实际宽度）
    //步骤：
    //1.获取事件源及相关对象
    //2.绑定事件
    //3.书写事件驱动程序

    //1.获取事件源及相关对象
    var inner = document.getElementById("inner");
    var ul = inner.children[0];
    var spanArr = inner.children[1].children;

    //获取某张图片的实际宽度  图片框的宽度就是 一张图片的宽度
    var imgWidth = inner.offsetWidth;

    //2.绑定事件
    for (var i = 0; i < spanArr.length; i++) {
        //给每一个span绑定一个索引 因为图片移动的时候需要用
        spanArr[i].index = i;

        spanArr[i].onmouseover = function () {
            //先处理span  给当前的span添加高亮样式
            for (var j = 0; j < spanArr.length; j++) {
                spanArr[j].className = "";
            }
            this.className = "current";

            //开始移动ul
            animateX(ul, -this.index * imgWidth);

        }

    }

    //3.书写事件驱动程序

    /**
     * 功能：元素水平方向缓速移动
     * @param element
     * @param target
     */
    function animateX(element, target) {
        //使用定时器之前先清除定时器
        clearInterval(element.timer);

        //使用定时器
        element.timer = setInterval(function () {
            //获取步长 缓速的步长=（指定距离 -当前距离）/10
            element.speed = (target - element.offsetLeft) / 10;
            //二次计算步长 因为如果当步长为小数时 可能会导致 水取不尽 定时器永远停不下来
            element.speed = element.speed > 0 ? Math.ceil(element.speed) : Math.floor(element.speed);

            //判断 剩下的距离是否小于或者等于步长，如果是的话，
            // 那就不需要再移动了，直接指定位置然后清除定时器
            //判断要取绝对值，因为步长可负可正
            if (Math.abs(target - element.offsetLeft) <= element.speed) {
                element.style.left = target + "px";
                clearInterval(element.timer);
                return;
            }
            //如果剩下的距离不小于或者等于步长 那么就老老实实的缓速移动
            element.style.left = element.offsetLeft + element.speed + "px";
        }, 30);
    }


</script>

</body>
</html>

◆使用封装的缓速动画来DIY左右轮播图，也就是点击左右按钮的时候，图片左右缓速切换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用封装的缓速动画制作左右轮播图</title>
    <style type="text/css">

        body, ul, li, div, span, img {
            padding: 0;
            margin: 0;
        }

        img {
            border: 0 none;
            vertical-align: top;
        }

        .box {
            width: 520px;
            height: 280px;
            padding: 5px;
            border: 1px solid #f09;
            margin: 100px auto;
        }

        .inner {
            width: 520px;
            height: 280px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        ul {
            list-style: none;
            width: 500%;
            position: absolute;
            left: 0;
        }

        li {
            width: 520px;
            height: 280px;
            float: left;
        }

        /*鼠标移动到图片框时 就显示*/
        .inner:hover .square {
            display: block;
        }

        .square {
            width: 100%;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            display: none;
            /*默认不显示*/
        }

        .square span {
            display: block;
            width: 30px;
            height: 60px;
            background-color: #fff;
            font: 500 25px/60px "consolas";
            text-align: center;
            cursor: pointer;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.3);
        }

        #sq-left {
            float: left;
        }

        #sq-right {
            float: right;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="inner" id="inner">
        <ul>
            <li><img src="images2/1.jpg"></li>
            <li><img src="images2/2.jpg"></li>
            <li><img src="images2/3.jpg"></li>
            <li><img src="images2/4.jpg"></li>
            <li><img src="images2/5.jpg"></li>
        </ul>
        <div class="square">
            <span id="sq-left"><</span>
            <span id="sq-right">></span>
        </div>
    </div>
</div>
<script>

    //需求：当点击左右箭头时，切换到上一张或下一张图片，如果是第一张或者最后一张，则给出提示
    //思路：点击左右箭头，图片的索引值++ 切换原理是移动图片 （-图片索引*图片实际的宽度）
    //步骤：
    //1.获取事件源及相关元素对象
    //2.绑定事件
    //3.书写事件驱动程序

    //1.获取事件源及相关元素对象
    var inner = document.getElementById("inner");
    var ul = inner.firstElementChild || inner.firstChild;
    var spleft = document.getElementById("sq-left");
    var spright = document.getElementById("sq-right");

    //2.绑定事件
    var index = 0;//定义一个全局变量图片索引
    spleft.onclick = function () {
        //3.书写事件驱动程序

        index--;//向左边切换
        if (index < 0) {
            index=0;
            alert("已经是第一张了！");
            return;
        }
        //移动
        animateX(ul, -index * inner.offsetWidth);
    }
    spright.onclick = function () {
        //3.书写事件驱动程序
        index++;//向右边切换
        if (index > ul.children.length-1) {
            index=ul.children.length-1;
            alert("已经是最后一张");
            return;
        }
        //移动
        animateX(ul, -index * inner.offsetWidth);
    }

    /**
     * 功能：缓速移动元素
     * @param element
     * @param target
     */
    function animateX(element, target) {
        //使用定时器之前先清除定时器
        clearInterval(element.timer);

        //使用定时器
        element.timer = setInterval(function () {
            //获取步长：步长=（指定距离-当前距离）/10
            element.speed = (target - element.offsetLeft) / 10;
            //二次计算步长 防止有小数时 水取不尽而导致定时器永远不停
            element.speed=element.speed>0?Math.ceil(element.speed):Math.floor(element.speed);

            //判断 剩余的距离是否只剩一步之遥
            //如果只剩一步之遥 就直接移动到指定位置 然后清除定时器
            //因为 步长可正可负 所以取绝对值来比较
            if(Math.abs(target - element.offsetLeft)<=Math.abs(element.speed)){
                element.style.left=target+"px";
                clearInterval(element.timer);
                return;
            }
            //如果距离还很长 ，那就老老实实的缓速移动
            element.style.left=element.offsetLeft+element.speed+"px";

        }, 25);


    }


</script>
</body>
</html>
◆ 使用封装的缓速动画来DIY无缝轮播图，轮播的本质就是来回移动图片的位置，无缝轮播其实是多加了一张图片在最后面，当你切换到最后一张图片时，最后一张图片再往后切换时，实际上会瞬间切换到第一张然后再继续切换缓速切换到第二张，因为最后一张和第一张一模一样，所以瞬间切换的过程根本看不出来，所以就像很完整的无缝轮播了。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用封装的缓速动画制作无缝轮播图</title>
    <style type="text/css">

        body, ul, ol, li, div, span, img {
            padding: 0;
            margin: 0;
        }

        img {
            border: 0 none;
            vertical-align: top;
        }

        .box {
            width: 500px;
            height: 200px;
            padding: 5px;
            border: 1px solid #f09;
            margin: 100px auto;
        }

        .inner {
            width: 500px;
            height: 200px;
            position: relative;
            overflow: hidden;
            /*cursor: pointer;*/
        }

        ul {
            list-style: none;
            width: 620%;
            position: absolute;
            left: 0;
        }

        ul li {
            float: left;
        }

        /*鼠标移动到图片框时 就显示*/
        .inner:hover .square {
            display: block;
        }

        .square {
            width: 100%;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            display: none;
            /*默认不显示*/
        }

        .square span {
            display: block;
            width: 30px;
            height: 60px;
            background-color: #fff;
            font: 500 25px/60px "consolas";
            text-align: center;
            cursor: pointer;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.3);
        }

        #sq-left {
            float: left;
        }

        #sq-right {
            float: right;
        }

        ol {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        ol li {
            display: inline-block;
            width: 16px;
            height: 16px;
            line-height: 14px;
            font-size: 12px;
            border: 1px solid #ccc;
            background-color: #fff;
            text-align: center;
            margin-left: 5px;
            cursor: pointer;
        }

        ol .current {
            background-color: #f00;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="inner" id="inner">
        <ul>
            <li><img src="images3/1.jpg"></li>
            <li><img src="images3/2.jpg"></li>
            <li><img src="images3/3.jpg"></li>
            <li><img src="images3/4.jpg"></li>
            <li><img src="images3/5.jpg"></li>
        </ul>
        <ol>
        </ol>
        <div class="square">
            <span id="sq-left"><</span>
            <span id="sq-right">></span>
        </div>
    </div>
</div>
<script>
    //需求：
    //      ol的li根据ul中li动态生成
    //      鼠标移入到ol中li时就切换到相应的图片
    //      鼠标点击左右箭头时就切换图片
    //      自动从左至右轮播图片
    //      鼠标移动到图片框时，图片就不动了
    //      要求实现无缝缓速轮播
    //思路：
    // 遍历ul中li 动态创建ol中li 添加到ol中去
    // 克隆第一个li然后追加到ul中
    // 给ol中li绑定事件 鼠标移入到哪一个li中就切换对应的图片 也就是移动ul的位置
    // 鼠标点击左右箭头时 就切换对应的图片
    // 设置定时器，图片隔段时间就自动切换
    // 给图片框设置移入移出事件  移入就清除定时器  移出就开启定时器
    // 无缝轮播的原理是  第一张和最后一张一样，
    // 当移动到最后一张时，继续向下移动时就瞬间移动到第一张，
    // 并且在此时还执行移动到第二张的动画，由于速度很快，所以看不出来，就像是无缝了。
    //步骤：
    //1.获取事件源及相关元素对象
    //2.绑定事件
    //3.书写事件驱动程序


    //1.获取事件源及相关元素对象
    var inner = document.getElementById("inner");
    var ul = inner.firstElementChild || inner.firstChild;
    var ol = inner.children[1];
    var sqleft = document.getElementById("sq-left");
    var sqright = document.getElementById("sq-right");

    //遍历ul中li 动态创建ol中li 添加到ol中去
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement("li");
        li.innerHTML = i + 1;
        if (i == 0) {
            li.className = "current";
        }
        ol.appendChild(li);
    }

    //克隆第一个li然后追加到ul中
    ul.appendChild(ul.children[0].cloneNode(true));


    //2.绑定事件
    var lastIndex=0;
    for (var i = 0; i < ol.children.length; i++) {
        //给每一个li绑定索引
        ol.children[i].index = i;

        //绑定事件
        ol.children[i].onmouseover = function () {
            //3.书写事件驱动程序


            //排他原则
            for (var j = 0; j < ol.children.length; j++) {
                ol.children[j].className = "";
            }
            //复活自己
            this.className = "current";

//            //如果你是从最后一张跳到第一张的话
//            if(this.index==0&&lastIndex==ol.children.length-1){
//                autoplay();
//                //如果是从第一张跳到最后一张的话
//            }else if(this.index==ol.children.length-1&&lastIndex==0){
//                rautoplay();
//            }else if(lastIndex-this.index==-1){
//                autoplay();
//            }else if(lastIndex-this.index==1)
//            {
//                rautoplay();
//            }else{
                //移动图片
                animateX(ul, -this.index * inner.offsetWidth);
//            for(var k=0;k<this.index;k++){
//
//            }
//            }
            //给左右箭头切换时记住当前的图片索引
            key = this.index;
            //记录最后一次 切换的图片索引
            lastIndex=key;
        }
    }

    //左右箭头的单击事件
    sqleft.onclick = function () {
        rautoplay();
    }
    sqright.onclick = function () {

        autoplay();
    }


    //正方向自动轮播
    var key = 0;//切换记住图片的索引
    function autoplay() {
        key++;
        if (key > ol.children.length) {
            ul.style.left=0;
            key = 1;
        }
        //移动图片
        animateX(ul, -key * inner.offsetWidth);
        按左右箭头切换图片时 ol中的li样式也要跟着改变
        //排他原则
        for (var j = 0; j < ol.children.length; j++) {
            ol.children[j].className = "";
        }
        //这个key是ul图片的索引，ul图片比方块儿多一张
        // 所以这里是判断方块儿是否到了最大的极限了
        if(key > ol.children.length-1) {
            //复活自己
            ol.children[0].className = "current";
        }else {
            //复活自己
            ol.children[key].className = "current";
        }

        //记录最后一次 切换的图片索引
        lastIndex=key;


    }
    //反方向自动轮播
    function rautoplay() {
        key--;
        if (key < 0) {
            //图片从第一张切换到最后一张 瞬间
            ul.style.left = -ol.children.length * inner.offsetWidth + "px";
            key = ol.children.length - 1;//动画的索引 切换到倒数第二张
        }

        //移动图片
        animateX(ul, -key * inner.offsetWidth);

        //按左右箭头切换图片时 ol中的li样式也要跟着改变
        //排他原则
        for (var j = 0; j < ol.children.length; j++) {
            ol.children[j].className = "";
        }
        //复活自己
        ol.children[key].className = "current";

        //记录最后一次 切换的图片索引
        lastIndex=key;
    }

    //自动轮播
   var timer= setInterval(autoplay,1000);
    //鼠标移入到图片框是 停止自动轮播
    inner.οnmοuseοver=function(){
        clearInterval(timer);
    }
    //鼠标移出到图片框是 开始自动轮播
    inner.οnmοuseοut=function(){
        timer= setInterval(autoplay,1000);
    }


    /**
     * 功能：元素缓速移动的动画
     * @param element
     * @param target
     */
    function animateX(element, target) {
        //使用计时器之前先清除定时器
        clearInterval(element.timer);
        //使用定时器
        element.timer = setInterval(function () {
            //获取步长 缓速步长计算公式：步长=（指定位置-当前位置）/10
            element.speed = (target - element.offsetLeft) / 10;
            //二次计算步长 防止步长带有小数 导致水永远取不完 然后定时器永远都不会停
            element.speed = element.speed > 0 ? Math.ceil(element.speed) : Math.floor(element.speed);

            //判断指定的距离与当前的位置是否只剩一步之遥
            //如果只剩一步之遥，那就直接移动到指定的位置，然后停止计时器
            //由于步长可正可负，所以判断时要使用绝对值
            if (Math.abs(target - element.offsetLeft) <= Math.abs(element.speed)) {
                element.style.left = target + "px";
                clearInterval(element.timer);
                return;
            }

            //如果剩余的距离不止是一步之遥，那么老老实实的 缓速移动
            element.style.left = element.offsetLeft + element.speed + "px";

        }, 18);
    }


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

2.使用缓速动画加scroll来DIY补充：楼层缓速跳跃

◆楼层缓速跳跃：同时设置html，body，ul，li的width:100%;height:100%，会让li继承占满一整页空间，因为这个时候html、body、ul、li的宽度和高度都是默认占满一整页，无论怎么放大缩小，都是默认占满一整页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>楼层缓速跳跃</title>
    <style type="text/css">
        body, ul, li, ol {
            margin: 0;
            padding: 0;
        }

        html, body, ul, li {
            width: 100%;
            height: 100%;
        }

        ol {
            list-style: none;
            position: fixed;
            left: 50px;
            top: 180px;
        }

        ol li {
            border: 1px solid #000;
            width: 88px;
            height: 88px;
            line-height: 88px;
            text-align: center;
            margin-top: -1px;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function () {

            //需求：给ol和ul中的li添加背景色
            //      当点击ol中li时缓速跳转到对应的ul中li中，
            //      也就是楼层跳转
            //思路：创建一个数组，循环给每一个li添加背景色
            //      给ol中的li添加单击事件，获取每一个对应的ul中li的距离上面的距离，然后设置缓速移动
            //步骤：
            //1.获取事件源及相关元素对象
            //2.绑定事件
            //3.书写事件驱动程序


            //1.获取事件源及相关元素对象
            var bgcolor = ["#f09", "#f00", "#0f0", "#ff0", "#909"];
            var ul = document.getElementsByTagName("ul")[0];
            var ol = document.getElementsByTagName("ol")[0];
            //循环给每一个li添加背景色
            for (var i = 0; i < bgcolor.length; i++) {
                ul.children[i].style.backgroundColor = bgcolor[i];
                ol.children[i].style.backgroundColor = bgcolor[i];
            }

            //2.绑定事件
            for (var i = 0; i < ol.children.length; i++) {

                //绑定索引
                ol.children[i].index = i;
                //绑定单击事件
                ol.children[i].onclick = function () {

                    //每一次点击获取 对应ul中li被卷去的距离
                    var target = ul.children[this.index].offsetTop;

                    //使用定时器之前先清除定时器
                    clearInterval(ul.timer);
                    ul.timer = setInterval(function () {
                        //获取步长 缓速步长获取原理：步长=（指定位置-当前位置）/10
                        ul.speed = (target - scroll().top) / 10;
                        //二次计算步长
                        ul.speed = ul.speed > 0 ? Math.ceil(ul.speed) : Math.floor(ul.speed);

                        //判断指定位置与当前位置是否只剩一步之遥
                        //如果只剩一步之遥，那就直接移动到指定位置，然后清除定时器
                        //由于步长可正可负，所以要取绝对值
                        if (Math.abs(target - scroll().top) <= Math.abs(ul.speed)) {
                            window.scrollTo(0, target);
                            clearInterval(ul.timer);
                            return;
                        }
                        //如果不止一步之遥 就继续缓速移动
                        window.scrollTo(0, scroll().top + ul.speed);
                    }, 18);
                }
            }

            //3.书写事件驱动程序


        }

        /**
         * 功能：获取兼容性的scroll对象
         * @returns {{left: (Number|number), top: (Number|number)}}
         */
        function scroll() {
            return {
                left: window.pageXOffset || document.body.offsetLeft || document.documentElement.offsetLeft,
                top: window.pageYOffset || document.body.offsetTop || document.documentElement.offsetTop
            }
        }

    </script>

</head>
<body>
<ul>
    <li>大仙女</li>
    <li>大熊猫</li>
    <li>大小熊</li>
    <li>大考拉</li>
    <li>大袋鼠</li>
</ul>
<ol>
    <li>小仙女</li>
    <li>小熊猫</li>
    <li>小小熊</li>
    <li>小考拉</li>
    <li>小袋鼠</li>
</ol>
</body>
</html>


3.event对象

◆在触发dom上的某个事件的时候，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event，但支持的方式不同。例如操作鼠标时，就会添加鼠标位置的相关信息到事件对象中，普通浏览器支持event（传参数），但是IE678只支持 window.event(不传参数)

document.οnclick=function(event){
//兼容性写法
event=event||window.event
console.log(event);
}

在IE678中，通过传参数的方式是无法获取到event对象的，只能够使用window.event，但是在一些主流浏览器上可以通过传递参数的方式获取event对象，所以以上的兼容性写法由此而来。

◆event对象的相关属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event对象</title>
</head>
<body>
<script>
    /**
     * 在触发dom上的某个事件的时候，会产生一个事件对象event，
     这个对象中包含着所有与事件有关的信息。所有浏览器都支持
     event，但支持的方式不同。例如操作鼠标时，就会添加鼠标位置
     的相关信息到事件对象中，普通浏览器支持event（传参数），但
     是IE678只支持 window.event(不传参数)
     * @param event
     */
    document.onclick = function (event) {
        //兼容性写法
        event = event || window.event;
        console.log(event);
        console.log(event.timeStamp)//：返回事件生成的日期和时间。
        console.log(event.bubbles)//：返回布尔值，指示事件是否是起泡事件类型。
        console.log(event.button)//：返回当事件被触发时，哪个鼠标按钮被点击。
        console.log(event.pageX)//：光标相对于该网页的水平位置（ie无）
        console.log(event.pageY)//：光标相对于该网页的垂直位置（ie无）
        console.log(event.screenX)//光标相对于该屏幕的水平位置
        console.log(event.screenY)//光标相对于该屏幕的垂直位置
        console.log(event.target)//该事件被传送到的对象
        console.log(event.type)//事件的类型
        console.log(event.clientX)//光标相对于该网页的水平位置 （当前可见区域）
        console.log(event.clientY)//光标相对于该网页的垂直位置
    }
    /**
     * 在IE678中，通过传参数的方式是无法获取到event对象的，只
     能够使用window.event，但是在一些主流浏览器上可以通过传递
     参数的方式获取event对象，所以以上的兼容性写法由此而来
     */
</script>
</body>
</html>


4.pageY与screenY与clientY的区别

◆event对象的pageY和pageX、screenY和screenX、clientY和clientX都是很常用的属性。

◆pageY和pageX是以页面文档(0,0)为基准的，页面文档就是html区域，指的是整个html区域，无论html页面有多长

◆screenY和screenX是以屏幕(0,0)点为基准，屏幕就是你的显示器里的桌面

◆clientY和clientX是以浏览器（浏览器可视区域）的(0,0)点为基准，浏览器指的也是html区域，指的html区域是指当前可见的那部分的html区域

◆当页面被卷去的距离为0时，pageY和pageX与clientY和clientX是一样的，但是当页面被卷去的距离不为0时，pageY=clientY+scroll().scrollTop,pageX=clientX+scroll().scrollLeft，这就是以页面为基准和以浏览器为基准的区别，在IE678中不支持pageX和pageY这两个属性，所以只能通过pageY=clientY+scroll().scrollTop,pageX=clientX+scroll().scrollLeft来实现兼容，通过event对象获取鼠标位于页面文档的真实坐标，获取鼠标位于页面文档的真实坐标的兼容性写法

var pageX=event.pageX||event.clientX+scroll().scrollLeft;
var pageY=event.pageY||event.clientY+scroll().scrollTop;

◆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pageY与screenY与clientY的区别</title>
    <style type="text/css">
        body {
            height: 5000px;
        }
    </style>
</head>
<body>
<script>
    /**
     * pageY和pageX是以页面文档(0,0)为基准的，
     * screenY和screenX是以屏幕(0,0)点为基准，
     * clientY和clientX是以浏览器（浏览器可视区域）的(0,0)点为基准，
     * 屏幕就是你的显示器里的桌面，
     * 页面文档就是html区域，
     * 浏览器指的也是html区域，
     * 但是不同的地方在于，
     * 页面文档指的是整个html区域，无论html有多长，
     * 而浏览器指的html区域是指当前可见的那部分的html区域，
     * 所以当页面被卷去的距离为0时，
     * pageY和pageX与clientY和clientX是一样的，
     * 但是当页面被卷去的距离不为0时，
     * pageY=clientY+scroll().scrollTop,
     * pageX=clientX+scroll().scrollLeft，
     * 这就是以页面为基准和以浏览器为基准的区别
     *
     * 在IE678中不支持pageX和pageY这两个属性，
     * 所以只能通过
     * pageY=clientY+scroll().scrollTop,
     * pageX=clientX+scroll().scrollLeft
     * 来实现兼容
     * @param event
     */
    document.οnclick=function(event){
        //兼容性写法
        event=event || window.event;
        console.log("以页面文档为基准：("+event.pageX+","+event.pageY+")");
        console.log("以桌面屏幕为基准：("+event.screenX+","+event.screenY+")");
        console.log("以浏览器可视为基准：("+event.clientX+","+event.clientY+")");


        var pagey = event.pageY ||event.clientY+scroll().top;
        var pagex= event.pageX || event.clientX+scroll().left;

        console.log("以页面文档为基准的兼容性写法：("+pagex+","+pagey+")");

    }

    /**
     * 功能：获取兼容性的scroll
     */
    function scroll() {
        return {
            left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
            top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
        }
    }
</script>
</body>
</html>

5.使用event对象配合offset家族和scroll家族来DIY动画：鼠标点击后小图片缓速跟随的动画

◆鼠标点击后小图片缓速跟随的动画：鼠标每点击页面中某个位置，都会让这个小图片以缓速移动的方式移动到这个位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标点击后小图片缓速跟随的动画</title>
    <style type="text/css">
        img {
            vertical-align: top;
            border: 1px solid #000;
            padding:10px 0;
            position: absolute;
            cursor: pointer;
        }
    </style>
</head>
<body>
<img src="https://img-blog.csdnimg.cn/2022010702592734449.jpeg" width="100">
<script type="text/javascript">
    //需求：当鼠标 点击页面时，小图片 缓速移动到鼠标点击的这个距离
    //思路：鼠标点击时获取 相应的事件对象，获取当前的坐标值 然后 设置元素缓速移动的动画
    //步骤：
    //1.老三步：
    // 获取事件源及相关元素对象、
    // 绑定事件、
    // 书写事件驱动程序
    //2.新五步：
    // 获取兼容性的事件对象、
    // 获取兼容性的坐标值、
    // 先清除定时器再开启定时器
    // 设置缓素移动的步长然后二次加工步长、
    // 判断是否符合要求然后清除定时器

    //1.老三步：
    // 获取事件源及相关元素对象、
    var img = document.getElementsByTagName("img")[0];

    // 绑定事件、
    document.onclick = function (event) {
        // 书写事件驱动程序

//        获取兼容性的事件对象、 在IE678中不支持传参 只支持window.event 但是其它浏览器支持传参
        event = event || window.event;

//        获取兼容性的坐标值、在IE678中没有pageX和pageY
        var targetY = event.pageY || event.clientY + scroll().top;
        var targetX = event.pageX || event.clientX + scroll().left;

        //附加需求：如果想要鼠标在图片正中间
        // 鼠标点击后，图片默认左上角对着鼠标
        // 直接让图片少移动自身的一半距离即可
        targetX=Math.ceil(targetX-img.offsetWidth/2);//向上取整
        targetY=Math.ceil(targetY-img.offsetHeight/2);//向上取整

        //使用定时器之前先清除定时器
        clearInterval(img.timer);
        //开启定时器
        img.timer = setInterval(function () {
            //设置缓素移动的步长
            img.speedX = (targetX - img.offsetLeft) / 10;//x轴的步长
            img.speedY = (targetY - img.offsetTop) / 10;//y轴的步长

            // 二次加工步长、
            img.speedX = img.speedX > 0 ? Math.ceil(img.speedX) : Math.floor(img.speedX);
            img.speedY = img.speedY > 0 ? Math.ceil(img.speedY) : Math.floor(img.speedY);

            //判断x轴与y轴的指定位置是否都与当前位置相差一步之遥
            //如果相差一步之遥那么就直接设置为指定位置然后清除定时器
            //因为无论是y轴还是x轴的步长都可正可负，所以相比较时要取绝对值
            if (
                    Math.abs(targetX - img.offsetLeft) <= Math.abs(img.speedX)
                    &&
                    Math.abs(targetY - img.offsetTop) <= Math.abs(img.speedY)
            ) {
                img.style.left = targetX + "px";
                img.style.top = targetY + "px";
                clearInterval(img.timer);
                return;
            }

            //如果 移动的距离并不是相差一步之遥 那么就继续缓速移动
            img.style.left = img.offsetLeft+img.speedX + "px";
            img.style.top = img.offsetTop+img.speedY  + "px";

        }, 18);
    }
    //2.新五步：
    // 获取兼容性的事件对象、
    // 获取兼容性的坐标值、
    // 先清除定时器再开启定时器
    // 设置缓素移动的步长然后二次加工步长、
    // 判断是否符合要求然后清除定时器


    /**
     * 功能：获取兼容性的scroll
     */
    function scroll() {
        return {
            left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
            top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
        }
    }

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

6.使用event对象配合offset家族和scroll家族来DIY动画补充一：指定区域图片放大镜

◆图片放大镜基础之获取小鼠标基于小盒子的坐标值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取小鼠标基于小盒子的坐标值</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 200px;
            position: absolute;
            left: 100px;
            top: 100px;
            /*border: 1px solid #000;*/
            background-color: #f09;
            font: 18px/30px "simsun";
            text-align: center;
            padding-top: 100px;
            color: #fff;
        }
    </style>
</head>
<body>
<div>
    鼠标位于盒子的x轴坐标值：100 px <br>
    鼠标位于盒子的y轴坐标值：100 px <br>
</div>
<script>
    //需求：当鼠标移入到盒子中时，开始计算鼠标位于盒子内部(0,0)点的坐标
    //思路：先获取鼠标位于当前页面文档的坐标，
    // 然后获取盒子位于当前文档的坐标，
    // 二者相减就能够得到鼠标位于盒子内部的坐标值
    //步骤：
    //1.老三步
    //获取事件源及相关对象
    //绑定事件
    //书写事件驱动程序

    //获取事件源及相关对象
    var div = document.getElementsByTagName("div")[0];

    //绑定事件
    div.onmousemove = function (event) {
        //书写事件驱动程序

        //获取兼容性的事件对象
        event = event || window.event;

        //获取兼容性的页面坐标对象
        var pagex = event.pageX || event.clientX + scroll().left;
        var pagey = event.pageY || event.clientY + scroll().top;

        //获取盒子位于页面文档的坐标
        var divx = div.offsetLeft;
        var divy = div.offsetTop;

        //计算鼠标位于盒子的坐标值
        var mouseOfDivX = pagex - divx;
        var mouseOfDivY = pagey - divy;

        //防止数值造成的抖动
        mouseOfDivX = mouseOfDivX < 10 ? "00" + mouseOfDivX : mouseOfDivX < 100 ? "0" + mouseOfDivX : mouseOfDivX;
        mouseOfDivY = mouseOfDivY < 10 ? "00" + mouseOfDivY : mouseOfDivY < 100 ? "0" + mouseOfDivY : mouseOfDivY;

        div.innerHTML = "鼠标位于盒子的x轴坐标值：" +
                mouseOfDivX + " px <br>鼠标位于盒子的y轴坐标值：" +
                mouseOfDivY + " px <br>";


    }

    /**
     * 功能：获取兼容性的scroll
     * @returns {{left: (Number|number), top: (Number|number)}}
     */
    function scroll() {
        return {
            left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
            top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
        }
    }


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

◆图片放大镜进阶之鼠标区域性移动时显示放大镜效果：图片放大的比例计算公式：（大图片的实际宽度-大盒子的实际宽度）/(小盒子的实际宽度-遮盖层的实际宽度)，使用的原理是，让多余的部分进行对比，这样才能够更加准确的获取比例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标区域性移动时显示放大镜效果</title>
    <style type="text/css">
        body, img, div {
            margin: 0;
            padding: 0;
        }

        img {
            vertical-align: top;
            border: 0 none;
        }

        .box {
            width: 350px;
            height: 350px;
            border: 1px solid #f09;
            position: relative;
            margin-top: 150px;
            margin-left: 100px;
        }

        .small {
            width: 350px;
            height: 350px;
            position: relative;
        }

        .small .mask {
            width: 175px;
            height: 175px;
            background-color: rgba(255, 200, 200, 0.3);
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
            display: none;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #0f0;
            overflow: hidden;
            display: none;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="small">
        <img src="https://img-blog.csdnimg.cn/2022010702592761214.jpeg"/>
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="https://img-blog.csdnimg.cn/2022010702592717126.jpeg" />
    </div>
</div>
<script>
    //需求：
    // 1.当鼠标移入到small盒子中时 显示mask层也显示big盒子，移出时不显示mask层也不显示big盒子
    // 2.当鼠标在small盒子中移动时 mask层也跟着移动
    // 3.当mask层移动时big盒子中的图片也随之移动，即呈现放大效果
    //思路：
    // 1.设置small盒子的鼠标移入移出事件，给mask盒子和big盒子设置显示的样式或者隐藏的样式
    // 2.设置small盒子的鼠标移动事件，鼠标在small盒子中移动时就获取鼠标在盒子中的坐标，
    //   然后赋值给mask盒子，最后给mask盒子设置可移动的坐标边界，防止mask出界了
    // 3.计算small中的图片和遮盖层的比例和big中的图片与big盒子的比例，
    //   根据比例来计算mask层移动时big层中的图片应该移动的距离。
    //步骤：
    //1.获取事件源及相关对象
    //2.绑定事件
    //3.书写事件驱动程序

    //1.获取事件源及相关对象
    var box = document.getElementById("box");
    var small = box.children[0];
    var mask = small.children[1];
    var big = box.children[1];
    var bigImg = big.children[0];

    //2.绑定事件
    //设置small盒子的鼠标移入移出事件，给mask盒子和big盒子设置显示的样式或者隐藏的样式
    //移入
    small.onmouseover = function () {
        //3.书写事件驱动程序
        show(mask);
        show(big);

    }
    //移出
    small.onmouseout = function () {
        //3.书写事件驱动程序
        hide(mask);
        hide(big);
    }
    //移动
    //设置small盒子的鼠标移动事件，鼠标在small盒子中移动时就获取鼠标在盒子中的坐标
    small.onmousemove = function (event) {
        //获取兼容性的 event
        event = event || window.event;
        //获取兼容性的坐标位置
        var pagex = event.pageX || event.clientX + scroll().left;
        var pagey = event.pageY || event.clientY + scroll().top;
        //获取鼠标位于盒子的坐标 并且设置鼠标在遮盖层的中间显示
        var mouseOfSamllX = Math.ceil(pagex - box.offsetLeft - mask.offsetWidth / 2);
        var mouseOfSamllY = Math.ceil(pagey - box.offsetTop - mask.offsetHeight / 2);

        //最后给mask盒子设置可移动的坐标边界，防止mask出界了
        if (mouseOfSamllX < 0) {
            mouseOfSamllX = 0;
        }
        if (mouseOfSamllX > small.offsetWidth - mask.offsetWidth) {
            mouseOfSamllX = small.offsetWidth - mask.offsetWidth;
        }
        if (mouseOfSamllY < 0) {
            mouseOfSamllY = 0;
        }
        if (mouseOfSamllY > small.offsetHeight - mask.offsetHeight) {
            mouseOfSamllY = small.offsetHeight - mask.offsetHeight;
        }

        //然后赋值给mask盒子
        mask.style.left = mouseOfSamllX + "px";
        mask.style.top = mouseOfSamllY + "px";

        //计算small中的图片和遮盖层的比例和big中的图片与big盒子的比例
        //比例公式：（大图片的实际宽度-大盒子的实际宽度）/(小盒子的实际宽度-遮盖层的实际宽度)
        //原理：也就是让多余的部分进行对比，从而产生精确的比例
        var bili = (bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth);

        bigImg.style.marginLeft = -mouseOfSamllX * bili + "px";
        bigImg.style.marginTop = -mouseOfSamllY * bili + "px";
    }


    //显示
    function show(element) {
        element.style.display = "block";
    }
    //隐藏
    function hide(element) {
        element.style.display = "none";
    }
    //获取兼容性的scroll对象
    function scroll() {
        return {
            left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
            top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
        }
    }

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

7.使用event对象配合offset家族和scroll家族来DIY动画补充二：鼠标拖拽自定义的确认框移动+模拟自定义的窗体滚动条滚动

◆鼠标拖拽自定义的确认框移动：这个确认框有一点点好看，之前文章说的制作无限弹窗，这个demo中有提到过一小部分，把代码一解注释就会出现效果了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拖拽自定义的确认框移动</title>
    <style type="text/css">
        .dialog {
            width: 360px;
            height: 210px;
            border: 4px solid #903;
            /*颜色 x轴阴影偏移 y轴阴影偏移 模糊半径 阴影半径*/
            box-shadow: #901 0px 0px 50px 5px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .title {
            height: 30px;
            background-color: #901;
            padding-left: 20px;
            color: #fff;
            font: 600 15px/27px "microsoft";
            cursor: move;
        }

        .content {
            height: 180px;
            background-color: #ffe;
        }

        .cont-top {
            height: 100px;
            text-align: center;
            font: 600 20px/100px "microsoft";
            color: #902;
        }

        .cont-top:hover {
            color: #e00;
        }

        .cont-bottom {
            height: 120px;
            text-align: left;
        }

        .cont-bottom b {
            display: inline-block;
            width: 100px;
            height: 30px;
            margin-left: 50px;
            border: 2px solid #901;
            text-align: center;
            color: #901;
            font: 600 15px/30px "microsoft";
            cursor: pointer;
            background-color: #ffd;
        }

        b:hover {
            background-color: #fff;
            border-color: #d00;
            color: #e00;
        }

    </style>
</head>
<body>
<div class="dialog" id="dialog">
    <div class="title">提示框</div>
    <div class="content">
        <div class="cont-top">你真的真的真的要关闭吗？</div>
        <div class="cont-bottom">
            <b>狠心关掉</b><b>让它待着</b>
        </div>
    </div>
</div>
<script>

    //需求：当鼠标移动到标题部分时，鼠标按下然后移动时，窗体也跟着移动
    //思路：给提示框title添加鼠标按下的事件，获取鼠标为与当前盒子的坐标，
    //     然后再设置鼠标移动事件，然后再获取鼠标位于当前页面的坐标，
    //     之后后设置left top属性即可，鼠标放下时，
    //     就清除已经设置的鼠标移入事件
    //步骤：
    //1.获取事件源及相关元素对象
    //2.绑定事件
    //3.书写事件驱动程序

    //1.获取事件源及相关元素对象
    var dialog = document.getElementById("dialog");
    var title = dialog.children[0];
    //2.绑定事件
    title.onmousedown = function (event) {
        //获取兼容性的事件对象
        event = event || window.event;
        //获取兼容性的鼠标坐标对象
        var pageY = event.pageY || event.clientY + scroll().top;
        var pageX = event.pageX || event.clientX + scroll().left;

        //获取鼠标位于当前盒子中的位置
        var mouseOfDialogY = pageY - dialog.offsetTop;
        var mouseOfDialogX = pageX - dialog.offsetLeft;


        document.onmousemove = function (event) {
            //获取兼容性的事件对象
            //获取兼容性的事件对象
            event = event || window.event;
            //获取兼容性的鼠标坐标对象
            var pageY = event.pageY || event.clientY + scroll().top;
            var pageX = event.pageX || event.clientX + scroll().left;

            //获取移动后的盒子的坐标位置
            var dialogY = pageY - mouseOfDialogY;
            var dialogX = pageX - mouseOfDialogX;


            // 下面的盒子是弄着玩儿的  页面会出现无数的提示框 有点好玩儿
//            var newDialog = dialog.cloneNode(true);
//            document.body.appendChild(newDialog);
//            newDialog.style.left = dialogX + "px";
//            newDialog.style.top = dialogY + "px";

            //设置当前盒子的坐标位置
            dialog.style.left = dialogX + "px";
            dialog.style.top = dialogY + "px";


            //清除选中文字
            window.getSelection ?
                    window.getSelection().removeAllRanges() :
                    document.selection.empty();


        }
        title.onmouseup = function () {
            document.onmousemove = null;
        }


    }
    //3.书写事件驱动程序

    //获取兼容性的scroll对象
    function scroll() {
        return {
            left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
            top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
        }
    }

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

◆模拟自定义的窗体滚动条滚动    

    ◇动态设置滚动条的滑块儿的长度，公式：可见的内容的高度/内容的高度*可见的内容的高度。

    ◇清除选中的内容：

            △window.getSelection().removeAllRanges();在IE9及以上等其它主流浏览器支持这种清除选中内容的方式，如IE9、Firefox、Safari、Chrome和Opera支持window.getSelection().removeAllRanges();

            △ocument.selection.empty();IE9以下支持这种清除选中的内容的方式。

            △兼容性写法：window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();

    ◇这个窗体有一点点好看，不仅有滑块儿，还可以移动窗体，是一个综合性的demo。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟自定义的窗体滚动条滚动</title>
    <style type="text/css">
        .dialog {
            width: 600px;
            height: 500px;
            border: 4px solid #903;
            /*颜色 x轴阴影偏移 y轴阴影偏移 模糊半径 阴影半径*/
            box-shadow: #901 0px 0px 50px 5px;
            position: absolute;
            left: 320px;
            top: 50px;
        }

        .title {
            height: 30px;
            background-color: #901;
            padding-left: 20px;
            color: #fff;
            font: 600 15px/27px "microsoft";
            cursor: move;
        }

        .container {
            height: 470px;
            width: 566px;
            overflow: hidden;
        }

        .content {
            padding: 15px;
            background-color: #ffe;
            text-align: left;
            font: 600 15px/25px "microsoft";
            color: #902;
        }

        .content:hover {
            color: #e00;
        }

        #scroll {
            height: 470px;
            width: 30px;
            border-left: 4px solid #a01;
            /*border-right: 2px solid #a01;*/
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: #fbb;
        }

        #bar {
            width: 30px;
            height: 150px;
            background-color: #501;
            border-radius: 6px;
            cursor: pointer;
            box-shadow: #f02 0px 0px 50px 6px;
            position: absolute;
            left: 0;
            top: 0;
        }

        #bar:hover {
            background-color: #301;

        }
    </style>
    <script>
        //需求：当点击滚动条之后，往下滑动时，页面的内容也会对应的滑动
        //思路：设置滚动条的鼠标按下的事件，
        //      设置鼠标移动事件，
        //      设置滚动条可移动的范围，
        //      设置页面内容的的margin即可
        //步骤：
        //1.获取事件源及相关元素对象
        //2.绑定事件
        //3.书写事件驱动程序

        window.onload = function () {
            //1.获取事件源及相关元素对象
            var dialog = document.getElementById("dialog");
            var container = dialog.children[1]
            var contentObj = container.children[0];
            var scrollObj = document.getElementById("scroll");
            var bar = document.getElementById("bar");
            //2.绑定事件
            bar.onmousedown = function (event) {
                //获取兼容性的事件对象
                event = event || window.event;
                //获取兼容性的坐标值
                var pageY = event.pageY || event.clientY + scroll().top;
//            var pageX = event.pageX || event.clientX + scroll().left;

                //获取当前鼠标位于scroll条的位置 只需要一个y轴的坐标值
                var mouseOfScollY = pageY - bar.offsetTop;

                document.onmousemove = function (event) {
                    //获取兼容性的事件对象
                    event = event || window.event;
                    //获取兼容性的坐标值
                    var pageY = event.pageY || event.clientY + scroll().top;
                    //获取滚动条的位置坐标
                    var barY = pageY - mouseOfScollY;
                    //设置一下约束 防止滑块儿抛出滚动条内部
                    if (barY < 0) {
                        barY = 0;
                    }
                    if (barY > scrollObj.offsetHeight - bar.offsetHeight) {
                        barY = scrollObj.offsetHeight - bar.offsetHeight;
                    }

                    //设置bar的坐标值
                    bar.style.top = barY + "px";

                    //开始设置页面内容了
                    //等比例公式：（内容的高度-可见的内容的高度）/（滚动条的高度-滑块儿的高度）
                    var bili = (contentObj.offsetHeight - container.offsetHeight) /
                            (scrollObj.offsetHeight - bar.offsetHeight);
                    //计算页面内容需要移动的距离
                    var marginY = -barY * bili;
                    //开始移动
                    contentObj.style.marginTop = marginY + "px";

                    //取消选中
                    window.getSelection ? window.getSelection().removeAllRanges()
                            : document.selection.empty();
                }
            }
            //鼠标移入的事件
            bar.onmouseup = function () {
                document.onmousemove = null;
            }

            //动态设置滚动条的滑块儿的长度
            //公式：可见的内容的高度/内容的高度*可见的内容的高度
            var barHeight = container.offsetHeight / contentObj.offsetHeight * container.offsetHeight;
            bar.style.height = barHeight + "px";


            新增移动会话框部分
            var title = dialog.children[0];
            //2.绑定事件
            title.onmousedown = function (event) {
                //获取兼容性的事件对象
                event = event || window.event;
                //获取兼容性的鼠标坐标对象
                var pageY = event.pageY || event.clientY + scroll().top;
                var pageX = event.pageX || event.clientX + scroll().left;

                //获取鼠标位于当前盒子中的位置
                var mouseOfDialogY = pageY - dialog.offsetTop;
                var mouseOfDialogX = pageX - dialog.offsetLeft;


                document.onmousemove = function (event) {
                    //获取兼容性的事件对象
                    //获取兼容性的事件对象
                    event = event || window.event;
                    //获取兼容性的鼠标坐标对象
                    var pageY = event.pageY || event.clientY + scroll().top;
                    var pageX = event.pageX || event.clientX + scroll().left;

                    //获取移动后的盒子的坐标位置
                    var dialogY = pageY - mouseOfDialogY;
                    var dialogX = pageX - mouseOfDialogX;


                    // 下面的盒子是弄着玩儿的  页面会出现无数的提示框 有点好玩儿
//            var newDialog = dialog.cloneNode(true);
//            document.body.appendChild(newDialog);
//            newDialog.style.left = dialogX + "px";
//            newDialog.style.top = dialogY + "px";

                    //设置当前盒子的坐标位置
                    dialog.style.left = dialogX + "px";
                    dialog.style.top = dialogY + "px";


                    //清除选中文字
                    window.getSelection ?
                            window.getSelection().removeAllRanges() :
                            document.selection.empty();


                }
                title.onmouseup = function () {
                    document.onmousemove = null;
                }


            }

        }


        //获取兼容性的scroll对象
        function scroll() {
            return {
                left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
                top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
            }
        }
    </script>
</head>
<body>
<div class="dialog" id="dialog">
    <div class="title">会话框</div>
    <div class="container">
        <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>
            横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<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>
    <div id="scroll">
        <div id="bar"></div>
    </div>
</div>
</body>
</html>

 类似资料：

相关阅读

Flutter进阶之实现动画效果（三）HTML5中带有Google Maps标记的效果和动画Android使用PowerImageView实现播放强大的ImageView动画效果javascript学习笔记（三）BOM和DOM详解javascript动画之磁性吸附效果篇

相关文章

蔚来大数据笔试 7.178.24华为软件笔试一些小思路，希望大家笔试顺利JavaScript之事件类型（事件）JavaScript之模拟事件（事件）整理了米的大题和大疆事业岗笔试题 8.6

相关问答

与多个记录相关的事件源编排如果内容太大，带滚动条的tkinter笔记本React：如何使用use效果与组件相比？显示（相关）家长如何创建插入动画效果？

相关文档

如何使用 Gitbook 来做笔记JavaScript 闯关记React 全家桶 技术栈 学习笔记Android 和 Java 技术笔记DIY 一个实用的 miniLAPP 服务器
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.