JS基础之BOM基本操作的简单练习(图片修改前后对比)

最新推荐文章于 2024-10-09 11:19:11 发布

ZQsSpace

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量78

点赞数

分类专栏： JavaScript 文章标签： javascript css css3

本文链接：https://blog.csdn.net/ZQsSpace/article/details/128972531

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本篇文章包含了一个基于BOM基本操作的小练习，用于进一步加强对BOM基本操作的掌握。

关于BOM的基本操作可简单参考

https://blog.csdn.net/ZQsSpace/article/details/128972147?spm=1001.2014.3001.5502

效果图：

code：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            width: 100%;
            height: 100%;
            background-color: #425A7D;
        }
        #content{
            width: 1200px;
            height: 675px;
            margin: 0 auto;
            overflow: hidden;
            background-image: url("./img-original.jpg");
            background-size: contain;
            position: relative;
            color: #fff;
            font-weight: bold;
        }
        #content span{
            position: absolute;
            bottom: 20px;
        }
        #content>span{
            right: 20px;
        }
        #content>.left>span{
            left: 20px;
        }
        #active{
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            left: 570px;
            top: 307.5px;
            background-color: orange;
            z-index: 2;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
            user-select: none;
            animation: beLong2 0.5s linear;
        }
        #content>div.left>img{
            width: 1200px;
            height: 675px;
        }

        .left{
            width: 600px;
            height: 100%;
            overflow: hidden;
            float: left;
            position: relative;
            animation: beLong1 0.5s linear;
        }

        /* 自定义动画，宽度从0到50% */
        @keyframes beLong1 {
            from{width: 0px;}
            to{width: 50%;}
        }
        /* 自定义动画，左边位置从-30px到50%-30px*/
        @keyframes beLong2 {
            from{left: -30px}
            to{left: calc(50% - 30px);}
        }
    </style>
</head>
<body>
    <main>
        <div id="content">
            <span>original</span>
            <div id="active">&lt;&gt;</div>
            <div class="left"><span>modified</span><img src="./img-modified.jpg" alt="提示文字" title="modified"></div>
        </div>
    </main>

    <script>
        let cont = document.querySelector("#content");
        let active = document.querySelector("#active");
        let left = document.querySelector(".left");
        let move;
        active.onmousedown = function(x){
            // 判断是否为鼠标左键的点击
            if(x.button == 0){
                this.style.cursor="move";
                cont.style.cursor = "move";
                this.style.backgroundColor="#425A7D";
                let e = window.event.pageX || x.pageX;
                move = e - this.offsetLeft;

                // 图片范围内设置鼠标移动事件
                cont.onmousemove=function(){
                    let leftLong = window.event.pageX -  move;
                    if((leftLong + 30)>=0 && (leftLong + 30)<=1200){
                        left.style.width = (leftLong + 30) +"px";
                        active.style.left = leftLong+"px";
                    }
                }
                // 图片范围内设置鼠标移出事件
                cont.onmouseout = function(){
                    if(active.onmousemove){
                        active.style.backgroundColor="orange";    
                        cont.onmousemove=null;
                    };
                }
            }
        }

        // 文档设置鼠标抬起事件
        document.onmouseup = function(){
            active.style.backgroundColor="orange";
            active.style.cursor = "pointer";
            cont.style.cursor = "default";
            cont.onmousemove=null;
        }
        
    </script>

</body>
</html>

新手上路，如有错误，望大佬们指正。