JavaScript之图片操作4

Posted 2021-01-01 紅葉

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript之图片操作4相关的知识，希望对你有一定的参考价值。

本次要实现的效果是，在一个盒子里面有一张长图，只显示了一部分，为方便用户浏览，当鼠标移入时，图片开始滚动，将盒子分成上下两部分，当鼠标移入上部分时，图片向上滚动，当鼠标移入下部分时，图片向下滚动。

为了实现上面的效果，我们需要在html中进行简单的布局：

<div id="box">
     <img id="pic" src="images/timg.jpg" alt="">
     <span id="to_top"></span>
     <span id="to_bottom"></span>
</div>

其中div为外层固定大小的大盒子，因为图片大于盒子，所以需要将盒子设置超出隐藏，图片上下滚动式通过定位实现的，需要将图片设置为相对父级定位，通过两个span来判断鼠标移入时的位置是在上半部分还是下半部分，所以两个span均为盒子的一半，分别位于盒子的上半部分和下半部分。

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body{
            background-color: #000;
        }

        #box{
            width: 750px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }

        #pic{
            position: absolute;
            left: 0;
            top: 0;
        }

        #to_top, #to_bottom{
            width: 100%;
            height: 50%;
            /*background-color: greenyellow;*/
            position: absolute;
            left: 0;
            cursor: pointer;
        }

        #to_top{
            top: 0;
        }

        #to_bottom{
            bottom: 0;
        }
 </style>

接下来开始写相应的事件，首先需要获取相应的元素标签

var box = document.getElementById("box");
var pic = document.getElementById("pic");
var to_top = document.getElementById("to_top");
var to_bottom = document.getElementById("to_bottom");

然后监听鼠标事件，并用定时器实现动画效果。

to_top.onmouseover = function () {
       timer = setInterval(function () {
            num += 10;
            pic.style.top = num + \'px\';
       }, 20);
};
to_bottom.onmouseover = function () {
       timer = setInterval(function () {
            num += 10;
            pic.style.top = num + \'px\';
       }, 20);
};
box.onmouseout = function () {
      clearInterval(timer);
}

现在基本可以实现图片相应鼠标，进行上下滑动了，但还是有问题，首先是定时器累加，其次是图片无限制的上下滑动，针对这两个问题，我们需要在每次鼠标进入时清除定时器，另外就是判断滚动的临界值：

图片向下滚动时，顶部距离父级元素的位置不能大于0，即初始的默认值位置
图片向上滚动时，顶部距离父级元素的位置不能小于图片长度与盒子高度的差值

根据上面的两点，重新整理上面的代码：

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

        body{
            background-color: #000;
        }

        #box{
            width: 750px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }

        #pic{
            position: absolute;
            left: 0;
            top: 0;
        }

        #to_top, #to_bottom{
            width: 100%;
            height: 50%;
            /*background-color: greenyellow;*/
            position: absolute;
            left: 0;
            cursor: pointer;
        }

        #to_top{
            top: 0;
        }

        #to_bottom{
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <img id="pic" src="images/timg.jpg" alt="">
        <span id="to_top"></span>
        <span id="to_bottom"></span>
    </div>

<script>
    window.onload = function () {
        // 1. 获取标签
        var box = document.getElementById("box");
        var pic = document.getElementById("pic");
        var to_top = document.getElementById("to_top");
        var to_bottom = document.getElementById("to_bottom");

        var timer = null, num = 0;

        // 2. 监听鼠标事件
        to_top.onmouseover = function () {
            // 2.1 清除定时器
            clearInterval(timer);

            // 2.2 设置定时器
            timer = setInterval(function () {
                 // 步长
                 num -= 10;

                 // 判断
                 if(num >= -2466){
                     pic.style.top = num + \'px\';
                 }else {
                     clearInterval(timer);
                 }
            }, 20);
        };
        to_bottom.onmouseover = function () {
            // 2.1 清除定时器
            clearInterval(timer);

            // 2.2 设置定时器
            timer = setInterval(function () {
                // 步长
                num += 10;

                // 判断
                if(num <= 0){
                    pic.style.top = num + \'px\';
                }else {
                    clearInterval(timer);
                }
            }, 20);
        };
        box.onmouseout = function () {
            // 清除定时器
            clearInterval(timer);
        }
    }
</script>
</body>
</html>

完整代码下载链接：点这里

以上是关于JavaScript之图片操作4的主要内容，如果未能解决你的问题，请参考以下文章

javascript dom编程艺术笔记之图片库的改进

JavaScript之图片操作1

48个值得掌握的JavaScript代码片段（上）

JavaScript之图片操作2

JavaScript之图片操作5

JavaScript·图片库之节点