淘宝上经常用到的一个功能是利用图片的放大镜功能来查看商品的细节

下面我们来实现这样一个功能吧，原理很简单：

实现一个可以随鼠标移动的虚框

在另外一个块中对应显示虚框中的内容

实现思路：

虚框用css中的透明度实现filter:alpha(opacity:20); opacity:0.2;

鼠标移动到小图上面时：虚框出现，大图对应出现

细节注意的地方：

1：虚框的定位：保持鼠标位于虚框的中心，如何处理鼠标中心距离四边距离小于虚框半径（或者方形的边长的一半）的情况？

2：保持大图中显示的内容是虚框选中的内容（保持大小图的比例问题）

代码如下：

<!DOCTYPE html>

<html>

<head>

    <title>js_study</title>

    <meta  content="text/html;charset=utf-8" http-equiv="Content-Type">

    <script src="js_study.js" type="text/javascript" charset="utf-8"></script>

<style>

    #div1 { width:280px; height:200px; position:relative; margin:30px auto 0px;}

    #div1 img{width:280px; height:200px;}

    #div1 span { width:100px; height:100px; background:blue; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); opacity:0.2;}

    .show { width:100%; height:100%; background:blue; position:absolute; z-index:10px; filter:alpha(opacity:10); opacity:0.1; left:0px; top:0px; }

    #div2 {width:400px; height:400px; position:relative; display:none; overflow:hidden; margin:0px auto 0px;}

    #img1 { position:absolute;}

</style>

</head>

<body style="margin 0px; text-align: center" onload="init();" >

        <div id="div1">

            <img src="./num/2.jpg">

            <span style="display: none; left: 204px; top: 41px;"></span>

            <div class="show"></div>

        </div>

        <div id="div2" style="display: none;">

            <img id="img1" src="./num/2.jpg" style="left: -610px; top: -149.21311475409834px;">

        </div>

</body>

</html>
//放大镜效果

var moveme = false;

function init () {

    var d1 = document.getElementById('div1');

    var the_float = d1.getElementsByTagName('div')[0];

    var the_span  = d1.getElementsByTagName('span')[0];

    var the_img   = document.getElementById('img1');

    the_float.onmouseover = function  () {

        the_span.style.display = 'block';

        the_img.parentNode.style.display = 'block';

    }

    the_float.onmouseout  = function  () {

        the_span.style.display = 'none';

        the_img.parentNode.style.display = 'none';

    }

    the_float.onmousemove = function  (ev) {

        var oEvent = ev||window.event;

        var x = oEvent.clientX - d1.offsetLeft - the_span.offsetWidth/2;//鼠标横坐标-父块距离浏览器窗口左距离-虚框的半

        var y = oEvent.clientY - d1.offsetTop - the_span.offsetHeight/2;

        //小图区域

        if(x<0) x=0;//左边界

        else if(x>the_float.offsetWidth - the_span.offsetWidth)//右边界

            x = the_float.offsetWidth - the_span.offsetWidth;

        if(y<0) y= 0;//上边界

        else if(y>the_float.offsetHeight - the_span.offsetHeight)//下边界

            y = the_float.offsetHeight -the_span.offsetHeight;

        the_span.style.left  = x+"px";

        the_span.style.top   = y+"px";

        //大图对应区域

        var percentX = x/(the_float.offsetWidth - the_span.offsetWidth);//计算比例

        var percentY = y/(the_float.offsetHeight - the_span.offsetHeight);

        var iParent = the_img.parentNode;

        //保持大小图之间的比例关系

        the_img.style.width = parseFloat(the_float.offsetWidth)/parseFloat(the_span.offsetWidth)*parseFloat(iParent.offsetWidth)+"px";

        the_img.style.left = -percentX*(the_img.offsetWidth - iParent.offsetWidth)+"px";

        the_img.style.top  = -percentY*(the_img.offsetHeight - iParent.offsetHeight)+"px";

    }

}

javascript 实现图片放大镜功能的更多相关文章

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

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

  2. vue中图片放大镜功能

    仿淘宝详情页图片鼠标移过去可对图片放大显示在右侧 效果图如下图,此功能支持PC端与移动端 接下来进入代码实现环节: 先准备两张图片,一张小图片叫 '土味.jpg',大小160*91:一张大图片叫 ' ...

  3. vue项目js实现图片放大镜功能

    效果图:   我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnif ...

  4. js 图片放大镜功能

    原理:放置两张相同的图片,一张作为主图片(图片1),另一张作为用来裁剪并放大的图片(图片2)          鼠标移动时,计算鼠标在图片1的位置(距离图片1左上角的x,y距离),以此决定在图片2开始 ...

  5. Jquery的jqzoom插件的使用（图片放大镜）

    今天学习一下,图片放大镜功能,需要使用插件JQzoom 引入文件 <script type="text/javascript" src="js/jquery.min ...

  6. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

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

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

  8. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  9. jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

随机推荐

  1. POJ2891：Strange Way to Express Integers——题解

    http://poj.org/problem?id=2891 题目大意: k个不同的正整数a1,a2,...,ak.对于一些非负m,满足除以每个ai(1≤i≤k)得到余数ri.求出最小的m. 输入和输 ...

  2. BZOJ5290 & 洛谷4438：[HNOI/AHOI2018]道路——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5290 https://www.luogu.org/problemnew/show/P4438 的确 ...

  3. HDU.1575 Tr A ( 矩阵快速幂)

    HDU.1575 Tr A ( 矩阵快速幂) 点我挑战题目 题意分析 直接求矩阵A^K的结果,然后计算正对角线,即左上到右下对角线的和,结果模9973后输出即可. 由于此题矩阵直接给出的,题目比较裸. ...

  4. springmvc不通过controller进行页面跳转

    1.controller 继承WebMvcConfigureAdapter 然后使用ViewControllerRegistry  来进行跳转

  5. Leetcode 380. 常数时间插入、删除和获取随机元素

    1.题目描述 设计一个支持在平均 时间复杂度 O(1) 下,执行以下操作的数据结构. insert(val):当元素 val 不存在时,向集合中插入该项. remove(val):元素 val 存在时 ...

  6. std::string在多字节字符集环境下substr的实现方法

    昨天写到<使用多字节字符集的跨平台(PC.Android.IOS.WP)编码/解码方法>中提到服务端使用std::string处理字符串,std::string对多字节字符集支持并不是很完 ...

  7. java获去json所有对象

    public static void main(String args[]){ JSONObject json1=JSONObject.fromObject("{'username' : ' ...

  8. sql 语句 插入数据 返回值问题

    1. 主键ID 自增 ,插入数据后返回这条数据的ID值 insert into tableName() values() select @@identity 2.主键ID 使用GUID类型值 ,插入数 ...

  9. shell编程：条件测试与比较（六）

    条件测试方法综述 test条件测试的简单语法及测试 范例6-1 测试文件(在test命令中使用-f选项:文件存在且为不同文件则表达式成立) [root@adminset ~]# test -f fil ...

  10. async/await 里的并行和串行

    我们在使用 async/await 语法时,有时会这样用: function getName () { return new Promise((resolve, reject)=>{ setTi ...