图片放大效果

最新推荐文章于 2020-12-28 15:53:35 发布

Zyl_CN

最新推荐文章于 2020-12-28 15:53:35 发布

阅读量201

点赞数

分类专栏：小练习

本文链接：https://blog.csdn.net/Zyl_CN/article/details/80537778

版权

小练习专栏收录该内容

32 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1 {
            width: 100px;
            height: 100px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            overflow: hidden;
            margin-top: 10px;
            border: 1px solid #000;
        }
        .box2>img {
        }
        .a{
            width: 30px;
            height: 30px;
            background: gold;
            display: none;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="box1"><img src="1.jpg" alt=""></div>
<div class="box2"><img src="2.jpg" alt=""></div>
<div class="a"></div>
<script>
    // 获取相关元素
    var box1=document.getElementsByClassName('box1')[0];
    var box2=document.getElementsByClassName('box2')[0];
    var box2Img=box2.getElementsByTagName('img')[0];
    var a=document.getElementsByClassName('a')[0];
    // 添加划上事件
    box1.onmousemove=function (event) {
        // 获取鼠标位置
        var box1X=event.clientX;
        var box1Y=event.clientY;
        // 修改小方块状态
        a.style.display='block';
        // 获取最大与最小的X/Y的数值
        var maxX=box1.offsetWidth-a.offsetWidth/2;
        var minX=a.offsetWidth/2;
        var maxY=box1.offsetHeight-a.offsetHeight/2;
        var minY=a.offsetHeight/2
        // 为了不让小方块出去，进行判断
        if(box1X>=maxX){
            box1X=maxX;
            if(box1Y>=maxY){
                box1Y=maxY;
            }
        }
        if(box1X<=minX){
            box1X=minX;
            if(box1Y<=minY){
                box1Y=minY;
            }
        }
        if(box1Y>=maxY){
            box1Y=maxY;
            if(box1X>=maxX){
                box1X=maxX;
            }
        }
        if(box1Y<=minY){
            box1Y=minY;
            if(box1X<=minX){
                box1X=minX;
            }
        }
        // 获取大图与小图的比例
        var box2X=-(box2Img.offsetWidth/box1.offsetWidth*box1X);
        var box2Y=-(box2Img.offsetHeight/box1.offsetHeight*box1Y);
        // 让小方块的中心与鼠标相同
        a.style.top=(box1Y-a.offsetHeight/2)+'px';
        a.style.left=(box1X-a.offsetWidth/2)+'px';
        // 让大图移动
        box2Img.style.marginTop=(box2Y+a.offsetHeight)+'px';
        box2Img.style.marginLeft=(box2X+a.offsetWidth)+'px';
    }
    // 添加划下事件
    box1.onmouseout=function () {
        a.style.display="none";
    }
</script>
</body>
</html>

Zyl_CN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片放大效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ padding: 0;
复制链接

扫一扫

专栏目录