javascript仿淘宝商品详情放大镜效果-js教程-PHP中文网

首页

web前端

js教程

javascript仿淘宝商品详情放大镜效果

小云云

Mar 15, 2018 pm 04:36 PM

javascript js 放大镜

我们经常逛淘宝的时候到淘宝商品详情看的时候，会经常使用到商品图片的放大镜功能，以前一直不知道怎么实现，遇到基本上都是网上找代码改，今天就用原生的js实现以下放大镜效果。

实现原理：

准备好大图（清晰的）和小图，两张图片必须一样只是放大或者缩小了而已，鼠标移入小缩略图的时候，上面的小图显示相应的图片，当鼠标移入上面的小图的时候，显示zoom和大图的box，然后鼠标在里面移动的时候通过 //鼠标到可视化窗口左边的距离减去小图遮罩层的一半宽度则为zomm的left的值，同理可以求top的值

zoom.style.left = event.clientX - zoom.offsetWidth/2 + “px”;
zoom.style.top = event.clientY - zoom.offsetHeight/2 + “px”;

然后用大图的尺寸除以小图的尺寸，那么就可以得出两个图片的放大比，当鼠标在左边的小图上移动的时候，通过放大比，就可以求出右边大图要向左或者上偏移的值。即可得出想要的结果。

//左边小遮罩层left的值乘以图片之间的放大倍数，则为右边大图片的left偏移值，top同理

bigimg.style.left = “-” + zoom.offsetLeft*scale + “px”;
bigimg.style.top = “-” + zoom.offsetTop*scale + “px”;

直接上代码：

html部分:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>javascript防淘宝放大镜效果</title>
    <style>
        *{padding:0;margin:0;}
        #box{margin:10px 0 0 10px;}
        #box .smallbox{position:relative;height:327px;width:300px;}
        #box .bigbox{display:none;position:absolute;left:310px;top:0;height:327px;width:300px;overflow:hidden;}
        #box .bigbox img{position:relative;}
        #box .zoom{display:none;position:absolute;height:100px;width:100px;background:#000;opacity:0.75;}
        #box .item{margin-top:5px;font-size:0;}
        #box .item img{height:70px;width:70px;margin-right:6px;}
    </style></head><body>
    <p class="scale-img" id="box">
        <p class="wrapbox">
            <!--左边小图片-->
            <p class="smallbox">
                <!--放大镜小层-->
                <p class="zoom"></p>
                <img src="s-1.png" class="smallimg">
                 <!--右边大图片-->
                <p class="bigbox">
                    <img src="b-1.png" class="bigimg">
                </p>
            </p>
            <p class="item">
                <img src="s-1.png" date-num = "1">
                <img src="s-2.png" date-num = "2">
                <img src="s-3.png" date-num = "3">
                <img src="s-4.png" date-num = "4">
            </p>
        </p>
    </p></body></html>

登录后复制

javascript部分：

    (function(){
        //预先加载大图，避免后面鼠标移入后显示大图时再去请求资源，影响体验
        new Image().src = "b-1.png";
        new Image().src = "b-2.png";
        new Image().src = "b-3.png";
        new Image().src = "b-4.png";

        var smallbox = document.querySelector("#box .smallbox");    //小图片box
        var bigbox = document.querySelector("#box .bigbox");    //大图片box
        var smallimg = smallbox.querySelector(".smallimg"); //小图片
        var bigimg = bigbox.querySelector(".bigimg");   //大图片
        var zoom = document.querySelector(".zoom");
        var itemImg = document.querySelectorAll("#box .item img");

        for(var i = 0, len = itemImg.length; i < len; i++){
            (function(j){
                itemImg[j].onmouseenter = function(){
                    var imgSrc = this.src;
                    smallimg.src = imgSrc;
                    bigimg.src = "b-" + (j+1) + ".png"; 
                }
            })(i);


        }

        //鼠标移入事件
        smallbox.onmouseenter = function(event){
            zoom.style.display = "block";
            bigbox.style.display ="block";
            //注意：offsetWdith的值是要元素为可视状态下才可以计算出来，不然当display:none的时候则为0；

            var scale = bigimg.offsetWidth/smallimg.offsetWidth;    //放大倍数
            var ev = event || window.event;


            //鼠标在内部移动的时候
            this.onmousemove = function(event){
                //鼠标到可视化窗口左边的距离减去小图遮罩层的一半宽度则为zomm的left的值，同理可以求top的值
                zoom.style.left = event.clientX - zoom.offsetWidth/2 + "px";
                zoom.style.top = event.clientY - zoom.offsetHeight/2 + "px";

                //如果向左向上移动小于0，那么则设置left为0,实现紧贴着边框效果
                if(zoom.offsetLeft <= 0){
                    zoom.style.left = 0;
                }

                if(zoom.offsetTop <= 0){
                    zoom.style.top = 0;
                }

                //如果向右向下移动小于0，那么则设置top,实现紧贴着边框效果

                if(zoom.offsetLeft >= smallbox.offsetWidth - zoom.offsetWidth){
                    zoom.style.left = smallbox.offsetWidth - zoom.offsetWidth + "px";
                }

                if(zoom.offsetTop >= smallbox.offsetHeight - zoom.offsetHeight){
                    zoom.style.top = smallbox.offsetHeight - zoom.offsetHeight + "px";
                }

                //左边小遮罩层left的值乘以图片之间的放大倍数，则为右边大图片的left偏移值，top同理
                bigimg.style.left = "-" + zoom.offsetLeft*scale + "px";
                bigimg.style.top = "-" + zoom.offsetTop*scale + "px";

            }
        }

        //鼠标移出事件
        smallbox.onmouseleave = function(){
            bigbox.style.display = "none";
            zoom.style.display = "none";
            this.onmousemove = null;
        }

    }());

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7517

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

PHP与JS开发技巧：掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

See all articles

javascript仿淘宝商品详情放大镜效果

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题