97JS原生：放大镜

2019-06-03 14:02:22 阅读：242 来源： 互联网

标签：原生放大镜 big top 97JS inner small offsetWidth left

原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视觉、原理和代码上是相反的）；所谓放大，其实就是一张原本就很小的图对应一张原本就很大的图。

```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .small{
            width: 400px;
            height: 400px;
            position: relative;
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201702/11/214206pk76vdieu5co7uwi.jpg) no-repeat center;
            border: 1px solid #ccc;
        }
        .small .inner{
            width: 100px;
            height: 100px;
            background: yellow;
            opacity: 0.5;
            filter: alpha(opacity=50);
            position: absolute;
            left:0;
            top:0;
            display: none;
        }
        .big{
            width: 400px;
            height: 400px;
            position: absolute;
            left:410px;
            top:0;
            overflow: hidden;
            border: 1px solid #ccc;
            display: none;
        }
        .big img{
            width: 200%;
            height: 200%;
            position: absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
<div id="small" class="small">
    <div class="inner"></div>
</div>
<div id="big" class="big">
    <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/11/214213x2oh86wpuuuzcuuc.jpg" alt=""/>
</div>
<script>
    var small=document.getElementById('small');
    var inner=small.getElementsByTagName('div')[0];
    var big=document.getElementById('big');
    var img=big.getElementsByTagName('img')[0];
    //当鼠标移入small的时候，inner和big显示
    small.onmouseover=function(){
        big.style.display='block';
        inner.style.display='block';
    };
    //当鼠标在small移动的时候：1）鼠标在inner的中间 2）inner跟随鼠标移动
    small.onmousemove=function(e){
        e=e||window.event;
        var left=e.clientX-this.offsetLeft-inner.offsetWidth/2;
        var top=e.clientY-this.offsetTop-inner.offsetHeight/2;
        if(left<=0){
            left=0;
        }else if(left>=this.offsetWidth-inner.offsetWidth){
            left=this.offsetWidth-inner.offsetWidth
        }
        if(top<=0){
            top=0;
        }else if(top>=this.offsetHeight-inner.offsetHeight){
            top=this.offsetHeight-inner.offsetHeight
        }
        inner.style.left= left+'px';
        inner.style.top= top+'px';
        //当inner移动的时候，大图跟着一起移动，并且，大图和inner移动的方向相反；
        //或者理解为：左边阴影在图片上从左到右移动的时候，右边大框也在大图片上从左到右移动（尽管视觉上是相反的）。
        img.style.left=left/(small.offsetWidth-inner.offsetWidth)*(big.offsetWidth-img.offsetWidth)+'px';
        img.style.top=top/(small.offsetHeight-inner.offsetHeight)*(big.offsetHeight-img.offsetHeight)+'px';
    };
    //当鼠标移出的时候，inner和big隐藏；
    small.onmouseout=function(){
        big.style.display='none';
        inner.style.display='none';
    }
</script>
</body>
</html>
```

标签：原生,放大镜,big,top,97JS,inner,small,offsetWidth,left
来源： https://www.cnblogs.com/gushixianqiancheng/p/10967195.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

97JS原生：放大镜