97JS原生：放大镜

最新推荐文章于 2019-06-03 14:12:00 发布

weixin_30512785

最新推荐文章于 2019-06-03 14:12:00 发布

阅读量59

点赞数

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10967195.html

版权

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

```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.οnmοuseοver=function(){
        big.style.display='block';
        inner.style.display='block';
    };
    //当鼠标在small移动的时候：1）鼠标在inner的中间 2）inner跟随鼠标移动
    small.οnmοusemοve=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.οnmοuseοut=function(){
        big.style.display='none';
        inner.style.display='none';
    }
</script>
</body>
</html>
```

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10967195.html

weixin_30512785

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
97JS原生：放大镜

原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视觉、原理和代码上是相反的）；所谓放大，其实就是一张原本就很小的图对应一张原本就很大的图。```html:run<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl...
复制链接

扫一扫