美文网首页
京东放大镜

京东放大镜

作者: 追马的时间种草 | 来源:发表于2019-10-23 15:38 被阅读0次

话不多说,直接先上效果图

效果图

放大镜 (2).gif

文件结构图:

1569806498039.png

上代码:

CSS

*{
    margin: 0;
    padding: 0;
}
.container{
    margin: 20px auto;
    width: 650px;
    /*height: 300px;*/
}
.container .smallBox{
    position: relative;
    float: left;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.container .smallBox img{
    display: block;
    width: 100%;
    height: 100%;
}
.mark{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    background: rgba(220, 20, 164,0.3);
    cursor: move;
}
.bigBox{
    position: relative;
    float: left;
    width: 350px;
    height: 350px;
    overflow: hidden;
}
.bigBox img{
    position: absolute;
    top: 0;
    left: 0;
    /*mark:small-box===big-box:大img*/
    width: 1050px;
    height: 1050px;

}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="magnifier.css">
<body>
<!--section.magnifierBox>(div.smallBox>img[src='img/缩小.jpg']+div.mark)+(div.bigBox>img[src='img/放大.jpg'])-->
<section class="container clearfix">
    <div class="smallBox">
        <img src="img/小.jpg" alt="">
        <!--<div class="mark"></div>-->
    </div>
    <div class="bigBox"><img src="img/小.jpg" alt=""></div>
</section>
<script src="magnifier.js"></script>
</body>

JS

let smallBox=document.querySelector('.smallBox'),
    mark=null;
let bigBox=document.querySelector('.bigBox'),
    bigImg=bigBox.querySelector('img');
//=>鼠标滑过:创建mark
smallBox.onmouseenter=function(){
    if(!mark){
        mark=document.createElement('div');
        mark.className='mark';
        this.appendChild(mark);
        bigBox.style.display='block';
    }
};
//=>鼠标移动实现mark跟随鼠标移动
smallBox.onmousemove=function(ev){
    if(!mark) return;
    //计算鼠标在盒子中间的left和top
    let curL=ev.pageX-smallBox.offsetLeft-mark.offsetWidth/2,
        curT=ev.pageY-smallBox.offsetTop-mark.offsetHeight/2;
    //计算的值不能超过边界
    let minL=0,minT=0,
        maxL=smallBox.offsetWidth-mark.offsetWidth,
        maxT=smallBox.offsetHeight-mark.offsetHeight;
    curL=curL<minL?minL:(curL>maxL?maxL:curL);
    curT=curT<minT?minT:(curT>maxL?maxT:curT);
    //给markz赋值样式,让其移动到指定位置
    mark.style.left=curL+'px';
    mark.style.top=curT+'px';

    bigImg.style.left=-curL*3.5+'px';
    bigImg.style.top=-curT*3.5+'px';
}
//=>鼠标离开,移除mark
smallBox.onmouseleave=function(){
    if(mark){
        this.removeChild(mark);//从页面中移除mark,但是此时mark变量依然存储着之前的值(页面移除是DOM操作,但是mark是js变量没啥关系)
        mark=null;//=>手动赋值为null,代表mark已经不存在了
        bigBox.style.display='none';
    }

};

相关文章

  • 京东放大镜

    话不多说,直接先上效果图 效果图 文件结构图: 1569806498039.png 上代码: CSS HTML JS

  • 案例:仿京东放大镜

    Document functiongetStyle(el,attr){ retur...

  • 淘宝京东图片放大镜

    获取淘宝放大图的两种方法: 拿到小图链接:https://img.alicdn.com/imgextra/i4/3...

  • 案例:仿京东放大镜

    案例:仿京东放大镜 整个案例可以分为三个功能模块 鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏...

  • 29 仿京东放大镜案例

    欢迎关注我的微信公众号:CurryCoder的程序人生 1.仿京东放大镜案例 功能需求:鼠标经过小图片盒子,黄色的...

  • js-京东商品放大镜效果

    惯例先上效果 忽略我手残晃动(太强会被撞到地上),(也不知道为什么明明浏览器背景是白色,录出来的图就是蓝色,求推荐...

  • 用js实现图片放大镜效果

    很多电商网站比如:京东、天猫、淘宝都有放大镜效果,每当看到心仪的物品时,鼠标移入图片时,便呈现出放大的效果。在没有...

  • iOS放大镜效果实现-ASMagnifierManger

    ASMagnifierManger 放大镜效果。可更改放大倍数和放大镜大小 特点介绍 放大镜效果 放大镜形状自定义...

  • 2018-12-02

    放大镜 HTML 放大镜 ...

  • 放大镜

    一、多种图片放大镜 二、单张图片放大镜

网友评论

      本文标题:京东放大镜

      本文链接:https://www.haomeiwen.com/subject/zcrkvctx.html