清凡Listen 2021-12-10 22:40 采纳率: 33.3%
浏览 21
已结题

求JavaScript实现图片选区放大效果，单图的

img

  • 写回答

1条回答 默认 最新

  • 前端阿彬 前端领域新星创作者 2021-12-12 22:24
    关注

    如有帮助，麻烦点个【采纳此答案】

    img

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
    *{
        margin:0px;
        padding:0px;
    }
    #box{
        width:430px;
        height:430px;
        margin:100px;
        margin-left:17%;
        position:relative;//这里使用相对定位，好让其他的元素能依靠这个元素定位
    }
    #move{
        background-image:url(../images/move.png);
        width:220px;
        height:220px;
        position:absolute;
        left:0px;
        top:0px;
        display:none;//先让他隐藏，用js使其显示
    }
    #bimg{
        width:430px;
        height:430px;
        overflow:hidden;
        position:absolute;
        top:0px;
        left:450px;
        display:none;//先让他隐藏，用js使其显示
    }
    #bimg img{
        width:800px;
        height:800px;
        position:absolute;
        top:0px;
        left:0px;
    }
    </style>
</head>
<body onload="bigimg()">
    <div id="box">
        <img src="https://img1.baidu.com/it/u=3693712532,3077493988&fm=26&fmt=auto" alt="#">
        <div id="move"></div>
        <div id="bimg">
            <img id="b_bimg" src="https://img1.baidu.com/it/u=3693712532,3077493988&fm=26&fmt=auto" alt="#">
        </div>
    </div>
    <script>
    function bigimg(){
        var bbox = document.getElementById("box");
        var bmove = document.getElementById("move");
        var bbimg = document.getElementById("bimg");
        var b_bimg = document.getElementById("b_bimg");
        bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框
            bbimg.style.display = "block";
            bmove.style.display="block";
        }
        bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框
            bbimg.style.display = "none";
            bmove.style.display="none";
        }
        bbox.onmousemove = function(e){//获取鼠标位置
            var x = e.clientX;//鼠标相对于视口的位置
            var y = e.clientY;
            var t = bbox.offsetTop;//box相对于视口的位置
            var l = bbox.offsetLeft;
            var _left = x - l - bmove.offsetWidth/2;//计算move的位置
            var _top = y - t -bmove.offsetHeight/2;
            if(_top<=0)//滑到box的最顶部
                _top = 0;
            else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部
                _top = bbox.offsetHeight-bmove.offsetHeight ;
            if(_left<=0)//滑到box的最左边
                _left=0;
            else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边
                _left=bbox.offsetWidth-bmove.offsetWidth ;
            bmove.style.top = _top +"px";//设置move的位置
            bmove.style.left = _left  + "px";
            var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
            var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
            var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
            var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
            b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息
            b_bimg.style.left = -b_bimg_left + "px";
        }
            
    }
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 12月24日
  • 已采纳回答 12月16日
  • 创建了问题 12月10日

悬赏问题

  • ¥20 测距传感器数据手册i2c
  • ¥15 RPA正常跑，cmd输入cookies跑不出来
  • ¥15 求帮我调试一下freefem代码
  • ¥15 matlab代码解决，怎么运行
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法