js放大镜效果

Joonas 发布于2019-08-20 17:03 / 3231人阅读

效果如淘宝、京东这些电商购物时，查看图片的放大效果。

思路：

先把右边的大图和左边小图里面的方块隐藏

当鼠标移入左边的smallPic，显示其里面的小方块和右边的bigPic

当鼠标移动里面的小方块，右边的bigPic显示图片对应的位置

小方块移动的范围在其父级smallPic的范围内

当鼠标smallPic后，bigPic和smallPic里面的小方块隐藏

用到的方法主要由定位、溢出隐藏、事件对象

html布局：

//左边小图

    
    //移动方块

//右边大图

    //路径自行设置

CSS样式：

#smallPic{
    width:200px;
    height:200px;
    position:relative;
    float:left;
}
#smallPic img{
    width:200px;
    height:200px;
}
#smallPic div{
    width:80px;
    height:80px;
    position:absolute;
    top:0;
    left:0;
    background:yellowgreen;
    opacity:0.5;
    cursor:move;
    display:none;
}
#bigPic{
    width:800px;
    height:800px;
    float:left;
    position:relative;
    display：none；
    overflow：hidden；
}
#bigPic img{
    position:absolute;
    top:0;
    left:0;
}

js代码

window.onload=function(){
    var smallPic=document.getElementById("smallPic");
    var div=document.querySelector(".smallPic div");
    var bigPic=document.getElementById("bigPic");
    var bigPicImg=document.querySelector(".bigPic img");
    
    //鼠标移入smallPic显示div和bigPic
    smallPic.onmouseover=function(){
        div.style.display="block";
        bigPic.style.display="block";
    }
    //当鼠标在smallPic里面移动时
    smallPic.onmousemove=function(ev){
        //设置两个变量，该变量的值得作用是在后面使鼠标在小方块中间及设置相关移动范围
        var x=ev.clientX-div.offsetWidth/2-small.offsetLeft;
        var y=ev.clientY-div.offsetHeight/2-small.offsetTop;
       
       //判断小方块的移动范围，并限制其在其父级范围内
       //x轴
       if(x<0){
           x=0;
       }else if(x>smallPic.offsetWidth-div.offsetWidth){
           x=smallPic.offsetWidth-div.offsetWidth;
       }
       //y轴
       if(y<0){
           y=0;
       }else if(y>smallPic.offsetHeight-div.offsetHeight){
           y=smallPic.offsetHeight-div.offsetHeight;
       }
       
       //小方块移动
       div.style.left=x+"px";
       div.style.top=y+"px";
       
       //设置小方块在其父级范围内移动的百分比
       var scaleX=x/(smallPic.offsetWidth-div.offsetWidth);
       var scaleY=y/(smallPic.offsetHeight-div.offsetHeight);
       
       //根据小方块移动的百分比来移动bigPic里面的图片的位置
       bigPicImg.style.left=scaleX*(bigPicImg.offsetWidth-bigPic.offsetwidth)+"px";
       bigPicImg.style.top=scaleY*(bigPicImg.offsetHeight-bigPi.offsetHeight)+"px";
    }
    
    //鼠标移出smallPic隐藏div和bigPic
    smallPic.onmouseout=function(){
        div.style.display="none";
        bigPic.style.display="none";
    }
}

GPU云服务器云服务器 js放大镜效果 js放大镜效果视频 js实现放大镜效果 js里面的放大镜效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83355.html

仿淘宝的放大镜效果

摘要：本次文章的主要内容是介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂的小功能，实际上原理却是非常的简单，下面我们学习一下淘宝放大镜效果是如何实现的。前言这一段时间事情挺多的，一直没有时间写文章。这两天稍微闲了一些，就趁这会闲工夫写一篇文章。本次文章的主要内容是介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂...

wuyangnju 2019-08-20 18:14 评论0 收藏0
原生js实现简单的放大镜效果

摘要：接下来我们开始实现一下它吧首先了解一下放大镜效果的架构如下图，它由两部分组成。第一部分的原理是设置的为需要放大的图片，同时背景的宽高为。然后通过移动的，来达到放大镜的效果。不过这只是简单的实现，还有使用实现的方法。前言：相信很多同学在浏览购物网站的时候都会用到过放大镜的功能，这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧；（1）首先了解一下放大镜效果的html架构：如...

lushan 2019-08-02 16:01 评论0 收藏0
原生js实现简单的放大镜效果

摘要：接下来我们开始实现一下它吧首先了解一下放大镜效果的架构如下图，它由两部分组成。第一部分的原理是设置的为需要放大的图片，同时背景的宽高为。然后通过移动的，来达到放大镜的效果。不过这只是简单的实现，还有使用实现的方法。前言：相信很多同学在浏览购物网站的时候都会用到过放大镜的功能，这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧；（1）首先了解一下放大镜效果的html架构：如...

megatron 2019-08-30 14:16 评论0 收藏0
原生js实现简单的放大镜效果

摘要：接下来我们开始实现一下它吧首先了解一下放大镜效果的架构如下图，它由两部分组成。第一部分的原理是设置的为需要放大的图片，同时背景的宽高为。然后通过移动的，来达到放大镜的效果。不过这只是简单的实现，还有使用实现的方法。前言：相信很多同学在浏览购物网站的时候都会用到过放大镜的功能，这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧；（1）首先了解一下放大镜效果的html架构：如...

chanjarster 2019-08-22 15:44 评论0 收藏0