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

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

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

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

实现思路：

虚框用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. BZOJ2226 & SPOJ5971：LCMSum——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2226 题目大意:给定一个n,求lcm(1,n)+lcm(2,n)+……+lcm(n,n). ———— ...

  2. 洛谷3258：[USACO2012 MAR]Flowerpot 花盆——题解

    https://www.luogu.org/problemnew/show/P2698#sub 老板需要你帮忙浇花.给出N滴水的坐标,y表示水滴的高度,x表示它下落到x轴的位置. 每滴水以每秒1个单位 ...

  3. [Leetcode] permutations ii 全排列

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  4. bzoj3224: Tyvj 1728 普通平衡树(打个splay暖暖手)

    (其实今天好热啊? 题目大意:插入,删除,k小,前驱后继,数的排名. splay和treap裸题...过几天补个treap的 splay: #include<iostream> #incl ...

  5. 关闭nginx日志

    在nginx.conf中将 access_log /dev/null; error_log /dev/null;

  6. SDUT 3930 线段树

    皮卡丘的梦想2 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 一天,一只住在 501 实验 ...

  7. oracle xml操作

      /*=====================生成\修改xml========================= */ --xmlelement多个标签层级 SELECT XMLELEMENT(& ...

  8. sql 建表以及查询---复杂查询之成绩排名

    废话不说,直接建表 1.表Player USE T4st -- 设置当前数据库为T4st,以便访问sysobjects IF EXISTS(SELECT * FROM sysobjects WHERE ...

  9. String、StringBuffer、StringBuilder区分和性能比较

    转载自:http://www.cnblogs.com/fancydeepin/archive/2013/04/23/min-snail-speak_String-StringBuffer-String ...

  10. Fiddler进行模拟POST、PUT提交数据注意点

    1.请求头要加 Accept: application/xml Content-Type: application/json 2.地址栏url地址后不要忘记加“/” 3.POST和PUT的对象参数都是 ...