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

最新推荐文章于 2022-08-18 16:40:01 发布

jwllwj_2018

最新推荐文章于 2022-08-18 16:40:01 发布

阅读量7.4w

点赞数

分类专栏： JS 文章标签： JS

本文链接：https://blog.csdn.net/jwlLWJ_2018/article/details/80844298

版权

本文介绍了使用JavaScript实现缓速轮播图的两种方式，包括鼠标悬停数字和点击按钮的缓速切换效果。还探讨了楼层缓速跳跃的实现原理，以及event对象在不同浏览器中的兼容性处理。详细解析了pageY、screenY、clientY等坐标属性的区别，并展示了如何利用event对象配合offset和scroll家族实现小图片跟随鼠标缓速移动、图片放大镜效果和自定义确认框拖拽移动及滚动条模拟。

摘要由CSDN通过智能技术生成

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;