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

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

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

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

实现思路：

虚框用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. POJ3648：Wedding——题解（配2-SAT简易讲解）

    http://poj.org/problem?id=3648 (在家,而且因为2-SAT写的不明不白的,所以这篇详细写) 题目大意: 有一对新人结婚,邀请了n-1 对夫妇去参加婚礼.婚礼上所有人要坐在 ...

  2. BZOJ2730：[HNOI2012]矿场搭建——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=2730 https://www.luogu.org/problemnew/show/P3225 听说 ...

  3. HDOJ.1342 Lotto （DFS）

    Lotto [从零开始DFS(0)] 点我挑战题目 从零开始DFS HDOJ.1342 Lotto [从零开始DFS(0)] - DFS思想与框架/双重DFS HDOJ.1010 Tempter of ...

  4. C++之tinyXML的使用详解

    tinyXML一款很优秀的操作C++类库,文件不大,但方法很丰富,和apache的Dom4j可以披靡啊!习惯了使用java类库的我看到这么丰富的c++类库,很高兴!它使用很简单,只需要拷贝几个文件到你 ...

  5. OS开发中的事件处理(二)-事件传递，响应者链条

    事件处理的事件传递 简介: 发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件 队列中,UIApplication会从事件队列中取出最前面的事件,并将事件分发下去以便处理, ...

  6. 转ajax的jsonp的文章

    转:http://justcoding.iteye.com/blog/1366102/ Js是不能跨域请求.出于安全考虑,js设计时不可以跨域. 什么是跨域: 1.域名不同时. 2.域名相同,端口不同 ...

  7. bzoj 1179 [Apio2009]Atm 缩点+最短路

    [Apio2009]Atm Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 4290  Solved: 1893[Submit][Status][Dis ...

  8. Bigbluebutton中文乱码问题

    Bigbluebutton中文乱码问题 Libreoffice安装中文 桌面版:在新立得软件包管理器中搜索下面两个文件,之后安装: libreoffice-l10n-zh-cn 和 libreoffi ...

  9. #应用openxml读写excel代码

    这个例子比较简单,没有考虑格式之类的问题. using DocumentFormat.OpenXml.Packaging; using DocumentFormat.OpenXml.Spreadshe ...

  10. UVA 1393 Highways

    https://vjudge.net/problem/UVA-1393 题意: a*b的点阵中能画多少条非水平非竖直的直线 方向‘/’ 和 方向 ‘\’ 对称 枚举直线所在矩形的i*j 直线可能重复的 ...