放大镜的小Demo

最新推荐文章于 2022-09-12 16:29:26 发布

Endless-love

最新推荐文章于 2022-09-12 16:29:26 发布

阅读量250

点赞数

分类专栏：前端关于前端的技术探讨文章标签：前端

本文链接：https://blog.csdn.net/stay_hungry_stay/article/details/81195290

版权

关于前端的技术探讨同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

放大镜的小Demo

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css" media="screen">

    body{

        margin: 0;

    }

    .box{

        width: 900px;

        margin:40px auto;

        height: 400px;

    }
    .top{

        width: 900px;

        margin:100px auto 0 auto;

        box-shadow: 3px 3px 5px red;

        background: blue;

        text-align: center;

        color: #fff;

        font:bold 30px/60px "黑体";


    }
    .small,.big{

        float: left;

        width: 430px;

        height: 430px;

        border: 1px solid #ccc;

        position: relative;

    }
    img{

        vertical-align: top;

    }
    .big{

        overflow: hidden;

        border: 0;

    }
    .big img{

        position: absolute;

        left: 0;

        top: 0;

    }

    .small{

        margin-right: 20px;

    }

    .cross{

        width: 200px;

        height: 200px;

        background: url(img/sqr.png);

        position: absolute;

        left: 0;

        top: 0;

        display: none;

        cursor: move;

    }

    .big{

        display:none;

    }

</style>

</head>

    <body>

<div class="box">

    <div class="small">

        <img src="img/small7.jpg" alt="">

        <div class="cross"></div>

    </div>

    <div class="big">

        <img src="img/big7.jpg" alt="">

    </div>

</div>

<script>

    var box = document.querySelector('.box');

    var small = document.querySelector('.box .small');

    var cross = document.querySelector('.box .cross');

    var big = document.querySelector('.box .big');

    var img = document.querySelector('.box .big img');

    small.onmouseover = function(e){

        e = e || event;

        big.style.display = "block";

        cross.style.display = "block";

        var cl = cross.offsetWidth/2;

        var ct = cross.offsetHeight/2;

        cross.onmousemove = function(e){

            e = e || event;

            var l = e.clientX - 175 - cl;

            var t = e.clientY - 40 - ct;

            if(l <= 0){

                l = 0;

            }else if(l >= small.offsetWidth - cross.offsetWidth){

                l = small.offsetWidth - cross.offsetWidth;

            }

            if(t <= 0){

                t = 0;

            }else if(t >= small.offsetHeight - cross.offsetHeight){

                t = small.offsetHeight - cross.offsetHeight;

            }

            cross.style.cssText = 'left:'+l+'px;top:'+t+'px;display:block';

            var bl = - (l/(small.offsetWidth - cross.offsetWidth))*big.offsetWidth;

            var bt = - (t/(small.offsetHeight - cross.offsetHeight))*big.offsetHeight;



            img.style.cssText = 'left:'+bl+'px;top:'+bt+'px;display:block';

        }

    }

</script>

</html>

small7.jpg

这里写图片描述

big7.jpg

这里写图片描述

sqr.png

这里写图片描述

Endless-love

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
放大镜的小Demo

放大镜的小Demo&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;Document&lt;/title&gt;&lt;style type="text/css" media=&qu
复制链接

扫一扫