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

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

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

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

实现思路：

虚框用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. POJ.1006 Biorhythms (拓展欧几里得+中国剩余定理)

    POJ.1006 Biorhythms (拓展欧几里得+中国剩余定理) 题意分析 不妨设日期为x,根据题意可以列出日期上的方程: 化简可得: 根据中国剩余定理求解即可. 代码总览 #include & ...

  2. bzoj3810: [Coci2015]Stanovi（记忆化搜索）

    实际上切出来的矩阵在原矩阵上的位置是不重要的...重要的只有矩阵的大小和上下左右是否在边界上. 于是我们可以设f[x][y][l][r][u][d]表示x*y的矩阵上下左右是不是边界的最小代价. 记忆 ...

  3. AES encryption of files (and strings) in java with randomization of IV (initialization vector)

    http://siberean.livejournal.com/14788.html Java encryption-decryption examples, I've seen so far in ...

  4. 实例——简单的Samba共享

    服务端配置 # 临时停止iptables service iptables stop # 临时禁用SELinux setenforce 0 # 禁止iptables开机自动启动 chkconfig i ...

  5. [POI2007] ZAP-Queries (莫比乌斯反演)

    [POI2007] ZAP-Queries 题目描述 Byteasar the Cryptographer works on breaking the code of BSA (Byteotian S ...

  6. WPF DataGrid、ListView 简单绑定

    DataGrid运行效果: xaml 代码: DataGridName= dtgData ItemsSource= {Binding} AutoGenerateColumns= False DataG ...

  7. MSSQL,MySQL 语法区别

    1 mysql支持enum,和set类型,sql server不支持 2 mysql不支持nchar,nvarchar,ntext类型 3 mysql的递增语句是AUTO_INCREMENT,而mss ...

  8. [LeetCode] 1. Two Sum ☆

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  9. 2017 济南综合班 Day 2

    木棍(stick) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK有很多木棍,具体的,总共有n根,且每根木棍都有一个长度.为了方便起见,我们可以用一个正 ...

  10. HDU 5533Dancing Stars on Me 基础几何

    Problem Description The sky was brushed clean by the wind and the stars were cold in a black sky. Wh ...