BOM案例

已于 2023-06-04 20:36:42 修改
阅读量118 收藏
点赞数
文章标签： 前端 javascript
于 2023-06-02 23:08:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_73838148/article/details/131013836
版权

1.拖动模态框

<!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>
        div {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('mousedown', function (e) {
            var x = e.pageX - div.offsetLeft;
            var y = e.pageY - div.offsetTop;
            var fun= function (e) {
                div.style.left = e.pageX - x + 'px';
                div.style.top = e.pageY - y + 'px';
            };
            document.addEventListener('mousemove', fun);
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', fun);
            });
        })
    </script>
</body>

</html>

2.放大镜

错误代码示例

  1. img vs div
  • 原因尚未清楚
<!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: 0px;
        }

        .all {
            width: 1200px;
            height: 500px;
            margin: 50px 50px;
            background-color: aquamarine;
        }

        .l {
            border: 1px solid rgba(0, 0, 0, .3);
            position: relative;
            float: left;
            height: 300px;
            width: 300px;
            background-color: antiquewhite;
        }

        .r {
            float: left;
            margin-left: 30px;
            width: 600px;
            height: 600px;
            background-color: antiquewhite;
        }

        img {
            width: 300px;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background: rgba(242, 240, 113, 0.5);
        }
    </style>
</head>

<body>
    <div class="all">
        <div class="l">
            <img src="b3.png" alt="">
            <div class="mask"></div>
        </div>
        <div class="r"></div>
    </div>
    <script>
        var div = document.querySelector('.l');
        var mask = document.querySelector('.mask');
        var r = document.querySelector(".r");
        div.addEventListener('mouseover', function (e) {
            mask.style.display = 'block';
            var x = e.clientX;
            var y = e.clientY;
            mask.style.top = y - 150 + 'px';
            mask.style.left = x - 150 + 'px';
            if (x < 150)
                mask.style.left = 0 + 'px';
            if (y < 150)
                mask.style.top = 0 + 'px';
            if (x > 250)
                mask.style.left = 100 + 'px';
            if (y > 250)
                mask.style.top = 100 + 'px';
            div.addEventListener('mouseout', function () {
                mask.style.display = 'none';
            })
        })

    </script>
</body>

</html>

 正确代码——自己完成

存在问题：

  • 代码中的数值写的是固定的，这就导致如果改变放置原图的盒子或放大镜所在的盒子的大小如果发生改变就要对代码做调整，否则效果出现错误。
  • 如果在浏览器页面中不把控制台展示出来，黄色盒子无法显示。如果展示出来，黄色盒子会显示但存在频闪问题。
    • 分析原因：只能是对 mask.style.display = 'none'; 语句设置有问题，但还未找到解决方法。
<!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: 0px;
        }

        .all {
            width: 1200px;
            height: 500px;
            margin: 50px 50px;
        }

        .l {
            border: 1px solid rgba(0, 0, 0, .3);
            position: relative;
            float: left;
            height: 300px;
            width: 300px;
            background-color: antiquewhite;
        }

        .r {
            position: relative;
            border: 1px solid rgba(0, 0, 0, .3);
            float: left;
            margin-left: 30px;
            width: 600px;
            height: 600px;
            background-color: antiquewhite;
            overflow: hidden;
        }

        img {
            position: absolute;
            top:0px;
            left:0px;
            width: 300px;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background: rgba(242, 240, 113, 0.5);
        }
    </style>
</head>

<body>
    <div class="all">
        <div class="l">
            <img src="b3.png" alt="">
            <div class="mask"></div>
        </div>
        <div class="r">
            <img src="b3.png" alt="" style="width:900px">
        </div>
    </div>
    <script>
        var img = document.querySelector('img');
        var img2 = document.querySelectorAll('img')[1];
        var mask = document.querySelector('.mask');
        var r = document.querySelector(".r");
        img.addEventListener('mouseover', function (e) {
            mask.style.display = 'block';
            var x = e.clientX;
            var y = e.clientY;
            mask.style.top = y - 150 + 'px';
            mask.style.left = x - 150 + 'px';
            if (x < 150)
                mask.style.left = 0 + 'px';
            if (y < 150)
                mask.style.top = 0 + 'px';
            if (x > 250)
                mask.style.left = 100 + 'px';
            if (y > 250)
                mask.style.top = 100 + 'px';
            var Top=mask.offsetTop;
            var Left=mask.offsetLeft;
            img2.style.top=-3*Top+'px';
            img2.style.left=-3*Left+'px';
            img.addEventListener('mouseout', function () {
                mask.style.display = 'none';
            })
        })

    </script>
</body>

</html>

正确代码——pink老师版本

存在问题：

  • 不知道为什么黄色盒子有频闪问题。
<!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: 0px;
        }

        .all {
            width: 1200px;
            height: 500px;
            margin: 50px 50px;
        }

        .l {
            border: 1px solid rgba(0, 0, 0, .3);
            position: relative;
            float: left;
            height: 300px;
            width: 300px;
            background-color: antiquewhite;
        }

        .r {
            position: relative;
            border: 1px solid rgba(0, 0, 0, .3);
            float: left;
            margin-left: 30px;
            width: 600px;
            height: 600px;
            background-color: antiquewhite;
            overflow: hidden;
        }

        img {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 300px;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background: rgba(242, 240, 113, 0.5);
        }
    </style>
</head>

<body>
    <div class="all">
        <div class="l">
            <img src="b3.png" alt="">
            <div class="mask"></div>
        </div>
        <div class="r">
            <img src="b3.png" alt="" style="width:900px">
        </div>
    </div>
    <script>
        var img = document.querySelector('img');
        var img2 = document.querySelectorAll('img')[1];
        var mask = document.querySelector('.mask');
        var r = document.querySelector(".r");
        var l = document.querySelector(".l");
        img.addEventListener('mouseover', function () {
            mask.style.display = 'block';
            r.style.display = 'block';
        })
        img.addEventListener('mouseout', function () {
            mask.style.display = 'none';
            r.style.display = 'none';
        })
        img.addEventListener('mousemove', function (e) {
            var x = e.pageX - l.offsetLeft;
            var y = e.pageY - l.offsetTop;
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            var maskMax=img.offsetWidth-mask.offsetWidth;
            var maskMax = img.offsetWidth - mask.offsetWidth;
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= maskMax) {
                maskX = maskMax;
            }
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= maskMax) {
                maskY = maskMax;
            }
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';

            var bigMax = img2.offsetWidth - r.offsetWidth;
            var bigX = maskX * bigMax / maskMax;
            var bigY = maskY * bigMax / maskMax;
            img2.style.left = -bigX + 'px';
            img2.style.top = -bigY + 'px';
        })
    </script>
</body>

</html>

效果图：

 3.轮播图案例

制作过程中存在的问题及解决方法

  • 当快速切换两张图片时，图片显示出现快速左右摇摆的问题，如下图。
    • 分析原因：代码编写有误，忘记在动画函数的开始取消其他定时器。在上一张图还未定未完成，此时ol的定时器还在，这时点击要求切换至另一张图，会给ol再加上定时器，两个定时器的作用发生冲突导致定位不成功。
    • 解决方法：在动画函数的开始时就取消其他定时器

 代码如下

html和css部分

<!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>
    <!-- <script src="animate.js"></script> -->
    <script src="main.js"></script>
    <style>
        * {
            margin: 0px;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .main {
            overflow:hidden;
            position: relative;
            width: 721px;
            height: 455px;
            margin: 100px auto;
        }

        .main>span {
            display: none;
            position: absolute;
            right: 0px;
            top: 50%;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            margin-top: -10px;
            border: 1px solid rgba(0, 0, 0, .2);
            text-align: right;
            line-height: 30px;
            z-index: 1;
        }

        ul {
            position: absolute;
            bottom: 0px;
            left:0px;
            margin-left:-40px;
        }
        ul li{
            float:left;
            margin-left:10px;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            border: 2px solid rgba(0, 0, 0, .2);
        }
        ol li{
            float:left;
        }
        ol{
            position: absolute;
            top:0px;
            left:0px;
            width: 600%;
        }
        li {
            list-style: none;
        }
        img{
            float:left;
        }
        .current{
            background-color: azure;
        }
    </style>
</head>

<body>
    <div class="main">
        <span style="left:0px;margin-left:-15px;" class="le"><a href="javascript:;">&lt;</a></span>
        <span style="margin-right:-15px;text-align: left;" class="ri"><a href="javascript:;">&lt;</a></span>
        <ol>
            <li><img src="upload/focus.jpg" alt=""></li>
            <li><img src="upload/focus2.jpg" alt=""></li>
            <li><img src="upload/focus3.jpg" alt=""></li>
        </ol>
        <ul></ul>
    </div>
    <script>
        var span=document.querySelector('span');
    </script>
</body>

</html>

 js部分

window.addEventListener("load", function () {
    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
                if (callback)
                    callback();
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 30);
    }
    var le = this.document.querySelector('.le');
    var ri = this.document.querySelector('.ri');
    var main = this.document.querySelector('.main');
    var mainWidth = main.offsetWidth;
    var ul = this.document.querySelector('ul');
    var arrowl = this.document.querySelectorAll('a')[0];
    var arrowr = this.document.querySelectorAll('a')[1];
    var ol = this.document.querySelector('ol');
    var olli = this.document.querySelector('ol').children;
    //刚进入页面时有这个定时器 以达到自动播放的功能
    var timer = setInterval(function () {
        arrowr.click();
    }, 2000);
    //动态生成小圆圈ul li
    for (var i = 0; i < olli.length; i++) {
        var li = this.document.createElement('li');
        ul.appendChild(li);
    }
    //复制第一张图，放在最后面
    var clone = olli[0].cloneNode(true);
    ol.appendChild(clone);
    olli[0].style.marginLeft = -40 + 'px';
    var ulli = this.document.querySelector('ul').children;
    //循环对小圆圈注册事件 排他思想 让被点击的小圆圈背景色为白色，其他没有背景色
    for (var i = 0; i < ulli.length; i++) {
        ulli[i].setAttribute('index', i);
        ulli[i].addEventListener('click', function () {
            var index = this.getAttribute('index');
            for (var i = 0; i < ulli.length; i++) {
                ulli[i].className = "";
            }
            this.className = "current";
            animate(ol, -index * mainWidth);
        })
    }
    //刚进入页面时第一个小圆圈背景是白色
    ulli[0].className = "current";
    //进入图片就显示箭头
    main.addEventListener('mouseover', function () {
        le.style.display = 'block';
        ri.style.display = 'block';
        //鼠标进入图片就关闭自动播放功能
        clearInterval(timer);
        timer = null;
    })
    //离开图片就隐藏箭头
    main.addEventListener('mouseout', function () {
        le.style.display = 'none';
        ri.style.display = 'none';
        //鼠标离开图片就开启自动播放功能
        timer = setInterval(function () {
            //手动调用点击事件
            arrowr.click();
        }, 2000);
    })
    //点击右链接自动滚动至下一张
    arrowr.addEventListener('click', function () {
        var num, circle;
        for (var i = 0; i < ulli.length; i++) {
            //下面这一行也可以写成
            //if (ulli[i].getAttribute("class") == "current")
            if (ulli[i].className == "current") {
                circle = ulli[i].getAttribute('index');
            }
        }
        num=++circle;
        if (circle == ulli.length)
        {
            circle = 0;
        }
        if (circle == 1)
        {
            ol.style.left = 0;
        }
        for (var i = 0; i < ulli.length; i++) {
            ulli[i].className = "";
        }
        ulli[circle].className = "current";
        animate(ol, -num * mainWidth);
    })
    //点击右链接自动滚动至上一张
    arrowl.addEventListener('click', function () {
        var num, circle;
        for (var i = 0; i < ulli.length; i++) {
            if (ulli[i].className == "current") {
                circle = ulli[i].getAttribute('index');
            }
        }
        num = --circle;
        if (circle == -1) {
            circle = ulli.length - 1;
            ol.style.left = -(olli.length - 1) * mainWidth + 'px';
            num = circle;
        }
        for (var i = 0; i < ulli.length; i++) {
            ulli[i].className = "";
        }
        ulli[circle].className = "current";
        animate(ol, -num * mainWidth);
    })
})
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值