JS实现放大镜效果

首先我们先设想一下放大镜效果

1、当鼠标进入小盒子的时候，把大图片显示出来

2、当指定移动区域的时候，显示当前放大区域（放大效果）

3、鼠标移除我们让它消失

一、实现页面布局HTML+CSS

二、实现放大镜的功能js

下面来看代码，让你思路变清晰

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>放大镜</title>
        <style>
            #box{
                width:  350px;
                height: 350px;
                margin: 100px 0 0 100px;
                position: relative;
            }   
            #small_box{
                width:100%;
                height: 100%;
                border:1px solid #ccc;
                position: relative;
            }       
            #mask{
                height: 100px;
                width: 100px;

                left: 0px;
                top: 0px;
                position: absolute;
                display: none;
                cursor: move;
            }   
            #big_box{
                height: 600px;
                width: 600px;
                border: 1px solid #ccc;
                overflow: hidden;
                top:0px;
                left: 360px;
                position: absolute;
                display: none;
            }       
        </style>
    </head>
    <body>
        <div id="box">
            <div id="small_box">
                <img src="img/pic01.jpg" />
                <span id="mask"></span>
            </div>
            <div id="big_box">
                <img src="img/pic001.jpg" style="position: absolute;"/>
            </div>
        </div>

        <script>
            window.onload = function(){
                //1.获取需要的元素
                var box = document.getElementById("box");
                var small_box = document.getElementById("small_box");
                var big_box = document.getElementById("big_box");
                var mask = document.getElementById("mask");
                var big_img = big_box.children[0];

                //2.鼠标移入小盒子事件
                small_box.onmouseover = function(){
                    //2.1鼠标移入，显示放大镜和大图片
                    big_box.style.display = 'block';
                    mask.style.display = 'block';

                    //2.2移动鼠标的同时移动放大镜,获取鼠标的移动事件
                    small_box.onmousemove = function(event){
                        // //获取鼠标的坐标点X  Y
                        var pointX = event.clientX - box.offsetLeft - mask.offsetHeight*0.5;
                        var pointY = event.clientY - box.offsetTop - mask.offsetWidth*0.5;

                        //做边界的校验
                        if(pointX<0){//当鼠标的坐标点X小于0的时候我们让它等于0，目的是让它不出去
                            pointX = 0;
                        }else if(pointX>small_box.offsetWidth-mask.offsetWidth){//当鼠标的坐标点大于（小盒子事件源宽度-指针区域事件源的宽度）时，我们就让它等于那个宽度，防止不出界。
                            pointX = small_box.offsetWidth-mask.offsetWidth;
                        }

                        if(pointY<0){
                            pointY = 0;
                        }else if(pointY>small_box.offsetHeight-mask.offsetHeight){
                            pointY = small_box.offsetHeight-mask.offsetHeight;
                        }

                        //移动mask
                        mask.style.left = pointX + 'px';
                        mask.style.top = pointY + 'px';

                        //移动大图
                        //小盒子中移动的距离：大盒子中移动的距离 = 小盒子的宽度：大盒子的宽度
                        //大盒子中移动的距离 = 小盒子中移动的距离/(小盒子的宽度：大盒子的宽度);
                        big_img.style.left = -pointX/(small_box.offsetWidth/big_box.offsetWidth)+'px';
                        big_img.style.top = -       pointY/(small_box.offsetHeight/big_box.offsetHeight)+'px';
                    }
                }

    //3.鼠标移除小盒子事件
    small_box.onmouseout = function(){
    //2.1鼠标移入，显示放大镜和大图片
    big_box.style.display = 'none';
    mask.style.display = 'none';
    }
    }
    </script>
    </body>
</html>
​

注意

移动大图

小盒子中移动的距离：大盒子中移动的距离 = 小盒子的宽度：大盒子的宽度大盒子中移动的距离 = 小盒子中移动的距离/(小盒子的宽度：大盒子的宽度);

big_img.style.left = -pointX/(small_box.offsetWidth/big_box.offsetWidth)+'px';
                        big_img.style.top = -       pointY/(small_box.offsetHeight/big_box.offsetHeight)+'px';

里面的减号指的是方向，方向为反方向，这样才能可以实现你所预想的结果，你可以试一下没有减号的效果你就知道是什么样的了

其它不懂的地方欢迎留言

 

javascript放大镜效果的更多相关文章

  1. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  2. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  4. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  5. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  6. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  7. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  8. JavaScript图形实例：图形放大镜效果

    1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...

  9. javascript html 鼠标放大镜效果

    1.鼠标放大镜效果 鼠标放大镜效果,将鼠标移入到左图片,则可以在其右边看到放大的图片,且鼠标移动滑块的大小即为右图显示图片.实际效果如下图所示:   <!DOCTYPE html> < ...

随机推荐

  1. 「JavaScript」JS四种跨域方式详解

    原文地址https://segmentfault.com/a/1190000003642057 超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript ...

  2. Java开源生鲜电商平台-监控模块的设计与架构(源码可下载）

    Java开源生鲜电商平台-监控模块的设计与架构(源码可下载) 说明:Java开源生鲜电商平台-监控模块的设计与架构,我们谈到监控,一般设计到两个方面的内容: 1. 服务器本身的监控.(比如:linux ...

  3. 再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特意的阻塞.两个很明 ...

  4. testng生成自定义html报告

    转自:https://blog.csdn.net/kdslkd/article/details/51198433 testng原生的或reportng的报告总有些不符合需要,尝试生成自定义测试报告,用 ...

  5. Java Script 学习笔记 (一) 基础

    1. 设置变量 const: 赋常量,不可更改. let :设置可更改变量. ES6 中推荐使用let 而不是var. Let 和var的区别 : let 将变量的作用域限定在当前{}中, var 定 ...

  6. BZOJ_1097_[POI2007]旅游景点atr_状压DP

    BZOJ_1097_[POI2007]旅游景点atr_状压DP 题面描述: FGD想从成都去上海旅游.在旅途中他希望经过一些城市并在那里欣赏风景,品尝风味小吃或者做其他的有趣 的事情.经过这些城市的顺 ...

  7. JVM内存异常与常用内存参数设置总结

    Java Web程序由于引入大量第三方java类库,在启动时经常会遇到内存溢出(Memory Overflow)或者内存泄漏(Memory leak)问题,导致程序启动失败. 一.OOM异常分类: O ...

  8. CentOS 7下单机部署RabbltMQ环境的操作记录

    一. RabbitMQ简单介绍 在日常工作环境中,你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息 ...

  9. djanogo class meta

    1.指定字段名: 在定义字段的时候,增加参数db_column='real_field': 2.指定表名: 在model的class中,添加Meta类,在Meta类中指定表名db_table 例如在某 ...

  10. happyChat开发系列：使用websocket.io实现双向通信的乐聊大前端开发

    一.前言 乐聊是一个自己用websocket写一个完整的应用,虽然功能比较欠缺,但是实现了基本的文字聊天,以及群聊,私聊,机器人聊天等功能.因为这个自己做了PC端,无线端(手机端),以及使用cordo ...