2020-10-23Dom小项目

最新推荐文章于 2022-08-13 22:00:37 发布

樱花树下'

最新推荐文章于 2022-08-13 22:00:37 发布

阅读量1.1k

点赞数 1

文章标签： html javascript js css

本文链接：https://blog.csdn.net/html_xiaojiu/article/details/109248304

版权

一滑块跟随鼠标移动

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            cursor: move;
            background-color: blueviolet;
            position: absolute;
            /* 开启定位才会有用left top */
            left: 0px;
            top: 0px;
            /* margin: 用margin会有问题; */
        }
    </style>
</head>

<body>
    <!-- 元素放在另一个元素的中间
         -->
    <div></div>
    <script>
        let div = document.querySelector("div");


        div.addEventListener("mousedown", function (e) {
            var mousex = e.clientX;//鼠标点下的x
            var mousey = e.clientY;//鼠标点下的y
            var boxx = div.offsetLeft;//鼠标点下盒子的x
            var boxy = div.offsetTop; //鼠标点下盒子的y        

            document.onmousemove = function fn(e2){
                var linex = e2.clientX;//鼠标移动后的x
                var liney = e2.clientY;//鼠标移动后的y
                var zongx = linex - mousex;//鼠标移动量x
                var zongy = liney - mousey;//鼠标移动量y
                div.style.left =  zongx+boxx+"px";//鼠标移动量加上初始盒子的量就是最后盒子该到的x
                div.style.top =  zongy+boxy+"px" ;//鼠标移动量加上初始盒子的量就是最后盒子该到的y

            }
        })
        div.addEventListener("mouseup",function(){
             document.onmousemove=null;//移除监听事件
        })


    </script>

注意：这里为什么没有选择给div加移动事件的监听而是选择给doucument加是为了避免在移动事件的监听时间里划出div产生的bug。

二，图片放大效果附带选项卡功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            position: relative;
            left: 200px;
            top: 150px;
        }

        img {
            width: 400px;
            height: 400px;
        }

        .mask {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            background: url(../Aimg/网格.jpg) no-repeat;
            background-size: 200px 200px;
            opacity: 0.4;
            display: none;
        }

        .big {
            width: 600px;
            height: 600px;
            position: absolute;
            left: 405px;
            top: 0;
            border: 1px solid red;
            display: none;
            background-image: url(../Aimg/猴子地狱火.jpg);
            background-size: 1000px 1000px;
            background-repeat: no-repeat;

        }
      
        ul,
        li {
            list-style: none;
        }

        li img {
            width: 100px;
            height: 100px;
        }

        ul {
            width: 100px;
            height: 500px;
            position: absolute;
            top: 140px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../Aimg/猴子地狱火.jpg" alt="" class="show">;
        <div class="mask"></div>
        <div class="big" style="background-image: url(../Aimg/猴子地狱火.jpg);"></div>
    </div>
    <!-- ...................................... -->
    <ul>
        <li>
            <img src="../Aimg/猴子地狱火.jpg" alt="">
        </li>
        <li>
            <img src="../Aimg/公孙离花间舞.jpg" alt="">
        </li>
        <li>
            <img src="../Aimg/韩信白龙吟.jpg" alt="">
        </li>
        <li>
            <img src="../Aimg/貂蝉仲夏夜之梦.jpg" alt="">
        </li>
    </ul>
    <!-- .............................................. -->
    <script>
        window.onload = function () {
            let box = document.querySelector(".box");
            let mask = document.querySelector(".mask");
            let big = document.querySelector(".big");
            let rect = box.getBoundingClientRect();

            function move(e) {
                let y = e.pageY - mask.offsetHeight / 2 - rect.top;
                let x = e.pageX - mask.offsetWidth / 2 - rect.left;


                if (x <= 0) {
                    x = 0;
                } else if (x >= 200) {
                    x = 200;
                }

                if (y <= 0) {
                    y = 0;
                } else if (y >= 200) {
                    y = 200;
                }

                mask.style.left = x + "px";
                mask.style.top = y + "px";

                big.style.backgroundPosition = `${-2 * x}px ${-2 * y}px`;
            }

            box.addEventListener("mousemove", move);

            box.addEventListener("mouseenter", function () {
                mask.style.display = "block";
                big.style.display = "block";
            });
            box.addEventListener("mouseleave", function () {
                mask.style.display = "none";
                big.style.display = "none";
            });


            let show = document.querySelector(".show")
            let li = document.querySelector("ul");
            li.addEventListener("click", function (e) {
                show.src = e.target.src;
                console.log(big.style.backgroundImage)
                big.style.backgroundImage=(`url(${e.target.src})`);
                 })
        }

    </script>
</body>

</html>

注意这个效果写的时候应该注意每个坐标怎么样去获取，代表的什么意思还有鼠标事件不能用mouseover和mouseout因为这组方法会冒泡。会影响使用体验和产生bug。下面是效果图。

在这里插入图片描述

樱花树下'

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-10-23Dom小项目

一滑块跟随鼠标移动<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 2
复制链接

扫一扫