在一些电商网站的商品详情页面，都会有放大镜效果，实现起来并不是很困难，今天用了两个小时，写了一个放大镜效果的实例，来分享给大家！

实现的效果大概是这个样子的

预览

先来看一下效果吧，点击下面的链接预览动态的效果！

http://sandbox.runjs.cn/show/vbu6ebq2

代码实现过程：

1. html部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

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

    <title>商品详情放大镜效果</title>

    <script type="text/javascript" src="js/jquery/jquery-3.2.1.js"></script>

</head>

<body>

<div class="container">

    <h2>商品详情放大镜效果</h2>

    <div class="magnifierContainer">

        <div class="imgLeft">

            <!-- 中号图片 -->

            <div class="imgMedium" id="imgMedium">

                <!-- 放大镜 -->

                <div class="magnifier" id="magnifier">

                    <img src="http://product.dangdang.com/images/zoom_pup.png">

                </div>

                <!-- 图片 -->

                <div class="mediumContainer" id="mediumContainer">

                    <img src="http://img3m3.ddimg.cn/2/21/22628333-1_w_2.jpg">

                </div>

                <div id="zhezhao"></div>

            </div>

            <!-- 缩略图 -->

            <ul class="img_x" id="img_x">

                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-1_x_2.jpg"></li>

                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-2_x_2.jpg"></li>

                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-3_x_2.jpg"></li>

                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-4_x_2.jpg"></li>

                <li><img src="http://img3m3.ddimg.cn/2/21/22628333-5_x_2.jpg"></li>

            </ul>

        </div>

        <div class="imgRight">

            <!-- 大图 -->

            <div class="img_u" id="img_u">

                <img src="http://img3m3.ddimg.cn/2/21/22628333-1_u_2.jpg">

            </div>

        </div>

    </div>

</div>

</body>

</html>

2. css部分

<style type="text/css">

    * {

        margin: 0;

        padding: 0;

    }

    ul {

        list-style: none;

    }

    .container {

        width: 850px;

        margin: 50px auto;

        text-align: center;

    }

    .magnifierContainer {

        display: flex;

        margin-top: 30px;

    }

    .imgMedium {

        position: relative;

    }

    .imgLeft .magnifier {

        position: absolute;

        display: none;

        width: 200px;

        height: 200px;

    }

    .mediumContainer {

        width: 350px;

        height: 350px;

        border: 1px solid #eee;

        overflow: hidden;

    }

    #zhezhao {

        width: 350px;

        height: 350px;

        background: transparent;

        position: absolute;

        top: 0;

        border: 1px solid transparent;

    }

    #zhezhao:hover {

        cursor: move;

    }

    .img_x {

        width: 350px;

        height: 77px;

        border: 1px solid #eee;

        margin-top: 20px;

        display: flex;

    }

    .img_x li{

        width: 54px;

        height: 54px;

        border: 2px solid transparent;

        margin: 8px 4px;

        padding: 2px;

    }

    .img_u {

        width: 500px;

        height: 450px;

        border: 1px solid #eee;

        float: left;

        margin-left: 15px;

        overflow: hidden;

        display: none;

    }

</style>

3. js部分

<script type="text/javascript">

    $('#img_x li').eq(0).css('border', '2px solid coral');

    $('#zhezhao').mousemove(function(e){

        $('#img_u').show();

        $('#magnifier').show();

        var left = e.offsetX - parseInt($('#magnifier').width()) / 2;

        var top = e.offsetY - parseInt($('#magnifier').height()) / 2;

        left = left < 0 ? 0 : left;

        left = left > (parseInt($('#zhezhao').outerWidth()) - parseInt($('#magnifier').outerWidth())) ? (parseInt($('#zhezhao').outerWidth()) - parseInt($('#magnifier').outerWidth())) : left;

        top = top < 0 ? 0 : top;

        top = top > (parseInt($('#zhezhao').outerHeight()) - parseInt($('#magnifier').outerHeight())) ? (parseInt($('#zhezhao').outerHeight()) - parseInt($('#magnifier').outerHeight())) : top;

        $('#magnifier').css('left', left + 'px');

        $('#magnifier').css('top', top + 'px');

        var leftRate = left / parseInt($('#zhezhao').outerWidth());

        var bigLeft = leftRate * parseInt($('#img_u img').outerWidth());

        $('#img_u img').css('margin-left', -bigLeft + 'px');

        var topRate = top / parseInt($('#zhezhao').outerHeight());

        var bigTop =  topRate * parseInt($('#img_u img').outerHeight());

        $('#img_u img').css('margin-top', -bigTop + 'px');

    })

    $('#zhezhao').mouseleave(function(){

        $('#img_u').hide();

        $('#magnifier').hide();

    })

    $('#img_x li').mouseover(function(){

        $(this).css('border', '2px solid coral').siblings().css('border', '2px solid transparent');

        $('#mediumContainer img').eq(0).attr('src', 'http://img3m3.ddimg.cn/2/21/22628333-' + ($(this).index()+1) + '_w_2.jpg');

        $('#img_u img').eq(0).attr('src', 'http://img3m3.ddimg.cn/2/21/22628333-' + ($(this).index()+1) + '_u_2.jpg');

    })

</script>

实现过程中需要注意的地方：

在实现放大镜在图片上移动时，我给商品图片绑定了mousemove鼠标移动事件，当鼠标移动的同时，也移动放大镜，但是效果却不是想象的样子，会有一些卡顿、闪烁的现象

当鼠标在商品图片上移动时，放大镜也随之移动，当鼠标在放大镜图片上时，则不会移动，这是因为绑定mousemove事件的是商品图片，而不是放大镜图片，而放大镜图片所在的图层在商品图片之上，所以当鼠标移动到放大镜图片上时，就不会触发mousemove事件，从而就出现了卡顿的现象。

那么，怎样解决呢？

我又加了一个div，这个div的大小和商品图片的div的大小一样，背景色为透明色，图层在最上面，然后给这个透明的div绑定mousemove事件，放大镜图片就会流畅的移动了。

在线调试

如需在线调试请点击下面的链接！

http://runjs.cn/code/vbu6ebq2

如果对您有帮助，记得点赞哦！需要您的支持与鼓励，同时也欢迎您留下宝贵意见！

js、jquery实现放大镜效果的更多相关文章

  1. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  2. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  3. 使用jquery实现放大镜效果

    原文:使用jquery实现放大镜效果 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整 ...

  4. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  5. 前端JS电商放大镜效果

    前端JS电商放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  7. js 实现商品放大镜效果

    知识点,需熟悉下面属性及含义: offsetLeft           //获取元素相对左侧的距离 (计算是从最左侧边框外开始) offsetTop           //获取元素相对顶部的距离 ...

  8. Jquery版放大镜效果

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

  9. js代码实现放大镜效果

    每当打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是非常好理解.如下图展示所见: 很是常见,在此记载一下,毕 ...

随机推荐

  1. ERP项目应该由谁来主导？

    前段时间在朋友圈看到了别人分享的公众号,主要是谈ERP项目应该由谁来主导的问题.文章的观点认为应该由哪个部门主导ERP的判断标准如下: 1.应该由一个期望上进的部门主导ERP项目: 2.应该由一个有话 ...

  2. SQL语句（floor、ceiling和round以及left和right）

    前言:个人认为命令没有必要记,学过的知识总结一下,用到了可以快速找到派上用场.用的多了,自然会记住,但是一定要理解每一个字符代表的是什么,多一个少一个会怎么样 要点概述 floor 和ceiling和 ...

  3. css属性总结

    前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习. 1.text-indent text-indent 属性规定文本块中首行文本的缩进.主要实现就像word那种首行缩进的效果. 详解ht ...

  4. mysql表分区简述

    一. 简介 数据库分区 数据库分区是一种物理数据库设计技术.虽然分区技术可以实现很多效果,但其主要目的是为了在特定的SQL操作中减少数据读写的总量以缩减sql语句的响应时间,同时对于应用来说分区完全是 ...

  5. SSM 框架 ---项目整合

    一.SSM框架理解 Spring(业务层) Spring就像是整个项目中装配bean的大工厂,在配置文件中可以指定使用特定的参数去调用实体类的构造方法来实例化对象. Spring的核心思想是IoC(控 ...

  6. UGUI Set Anchor And Pivot

    我的环境 Unity 5.3.7p4 在运行时动态的设置UI元素的锚点和中心点. 设置Anchor 修改offsetMax不生效 使用下面这段代码设置Anchor并不会生效,尽管他和你在属性面板看到的 ...

  7. 【Git 学习三】深入理解git reset 命令

    重置命令(git reset)是Git 最常用的命令之一,也是最危险最容易误用的命令.来看看git reset命令用法. --------------------------------------- ...

  8. Tomcat配置自定义JAVA环境

    Tomcat的bin目录下 在setclasspath.sh(Linux系统,Windows系统为setclasspath.bat)文件的开头添加: export JAVA_HOME=/usr/lib ...

  9. Linux系统将服务器时间与网络时间同步

    遇到一种情景,就是多台服务器之间的时间并不是同步的,有的快有的慢,这时候就要用到网络时间了, 登陆到服务器上,输入命令date可以查询服务器的时间,需要同步的时候需要安装ntpdate; 1.  安装 ...

  10. 《生命》第一集：Chanllenge of Life （生命的挑战）

    开篇讲的是弗罗里达海岸的海豚用尾巴荡起浑水圈批量捕鱼,肯尼亚的猎豹用集体战术捕猎体积大于自己的鸵鸟,马达加斯加的变色龙用伪装的方式来偷袭昆虫,紧接着讲的是南极洲的食蟹海豹如何从天敌虎鲸的围捕中惊险逃脱 ...