美文网首页
JS_放大镜效果

JS_放大镜效果

作者: Se7ven | 来源:发表于2017-06-02 21:07 被阅读63次

效果图如下:

放大镜.gif

一、CSS看源码吧!

二、JS代码真没有什么解释的,注释很清晰,,,,自己看吧

<script>

    //1. 获取元素对象
    var box = document.getElementById("box");
    var smallBox = document.getElementById("smallBox");
    var bigBox = document.getElementById("bigBox");
    var bigImg = document.getElementById("bigImg");
    var mask = document.getElementById("mask");

    //2.鼠标经过小盒子 显示遮罩和大盒子 鼠标离开后隐藏
    smallBox.onmouseover = function () {
        mask.style.display = "block";
        bigBox.style.display = "block";
    };
    smallBox.onmouseout = function () {
        mask.style.display = "none";
        bigBox.style.display = "none";
    };

    //3.遮罩跟随鼠标坐标
    //鼠标在smallBox上移动的时候 获取鼠标在盒子中的坐标 然后设置mask的位置
    smallBox.onmousemove = function (event) {
        var event = event || window.event;
        //获取鼠标在页面中的坐标
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        //获取鼠标在盒子中的坐标
        //这里不能用smallBox.offsetLeft因为smallBox的offsetParent是box
        //而smallBox到box的offsetLeft是0 所以这里要用box.offsetLeft
        var boxX = pageX - box.offsetLeft;
        var boxY = pageY - box.offsetTop;
        //计算mask的坐标 让mask的中心跟着鼠标点走
        var maskX = boxX - mask.offsetWidth / 2;
        var maskY = boxY - mask.offsetHeight / 2;
        //3.限制遮罩的运动范围
        if (maskX < 0) {
            maskX = 0;
        }
        if (maskX > smallBox.offsetWidth - mask.offsetWidth) {
            maskX = smallBox.offsetWidth - mask.offsetWidth;
        }
        if (maskY < 0) {
            maskY = 0;
        }
        if (maskY > smallBox.offsetHeight - mask.offsetHeight) {
            maskY = smallBox.offsetHeight - mask.offsetHeight;
        }
        //console.log(maskX + "--" + maskY);
        //设置mask的位置
        mask.style.left = maskX + "px";
        mask.style.top = maskY + "px";

        //4.按照比例移动大图
        //大图能够移动的总距离 = 大图的宽度-大盒子的宽度
        var bigToMove = bigImg.offsetWidth - bigBox.offsetWidth;
        //mask能够移动的总距离 = 小盒子的宽度-mask的宽度
        var maskToMove = smallBox.offsetWidth - mask.offsetWidth;
        //rate = 大图能够移动的总距离/mask能够移动的总距离
        var rate = bigToMove / maskToMove;
        //大图应该到的位置  = rate * mask当前的位置 (移动方向相反所以是负数)
        bigImg.style.left = -rate * maskX + "px";
        bigImg.style.top = -rate * maskY + "px";

    };

</script>

三、源码下载:吻我

相关文章

  • JS_放大镜效果

    效果图如下: 一、CSS看源码吧! 二、JS代码真没有什么解释的,注释很清晰,,,,自己看吧 三、源码下载:吻我

  • iOS放大镜效果实现-ASMagnifierManger

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

  • 放大镜效果

    写在最前面:一定要注意设置样式的时候大图片和小图片的width,height是有比例关系的;废话不多说,直接放效果...

  • 放大镜效果

    基本原理,左边有一个盛放图片的容器,里面有哥哥小的遮罩用来提示把那一部分展示到右边的大的展示放大之后的图片的部分左...

  • 放大镜效果

    商城中常用的图片放大效果 简书会自动上传外链图片,所以这里代码里面img标签里面对应的换两个地址【@换成.】,ht...

  • 放大镜效果

    *{ margin:0; padding:0; } body{ width: 960p...

  • 放大镜效果

  • 放大镜效果

    核心原理1、鼠标经过遮罩层显示,离开隐藏;2、移动鼠标遮罩层跟随,鼠标超出大盒子后遮罩层不跟随出框;3、移动遮罩层...

  • 十.放大镜效果的demo

    详情页放大镜效果收录 Javascript HTML CSS

  • JS_轮播器效果图

    ★ 博客:简易轮播器★ 源码:吻我 ★ 博客:完整版轮播器★ 源码:吻我

网友评论

      本文标题:JS_放大镜效果

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