扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jquery实现淘宝商品图片局部放大
  • 557

0
分享到

jquery实现淘宝商品图片局部放大

2024-04-02 19:04:59 557人浏览 八月长安
摘要

本篇博文用于简单记录图片放大功能实现，供大家参考，具体内容如下 功能实现还存在一些小漏洞在文章结尾提出，希望各位指正 1、图片放大初考虑将图片转换为字体图片形式，然后进行放大处理，但

本篇博文用于简单记录图片放大功能实现，供大家参考，具体内容如下

功能实现还存在一些小漏洞在文章结尾提出，希望各位指正

1、图片放大初考虑将图片转换为字体图片形式，然后进行放大处理，但最终本人技术不过关无法实现，后用width: 200%;进行一般的图片放大，所以当图片越大就存在一些失真；

2、图片放大后的显示为本次实现的关键，通过获取鼠标指针的位置从而获取指针在图片的那一个位置，再以当前位置进行图片放大，放大后将图片进行偏移，偏移量以鼠标指针在原图的位置上获取的left和top值乘以放大倍数就可以显示局部放大的功能了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/Jquery-1.10.2.js" ></script>
        <style>
            *{margin: 0;padding: 0;}
            .div1{
                width: 450px;
                height: 300px;
                overflow: hidden;
                display: inline-block;
            }
            .div1>img{width: 100%;}
            .div2{
                width: 450px;
                height: 300px;
                border: 1px solid #A9A9A9;
                overflow: hidden;
                display: inline-block;
                position: relative;
            }
            .div2>img{
                position: absolute;
                width: 200%;
                height: 200%;
            }
            .list1{
                width: 70px;
                height: 50px;
                float: left;
                margin-left: 10px;
            }
            .list1>img{width: 100%;}
            #zhezhao{
                width: 100px;
                height: 100px;
                background: #BC8F8F;
                opacity: 0.7;
                display: none;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <img src="../img/wall1.jpg" alt="" class="img1" />
            <div id="zhezhao"></div>
        </div>
        <div class="div2"></div>
        <div class="list">
            <div class="list1">
                <img src="../img/wall2.jpg" alt="" class="listimg1" />
            </div>    
            <div class="list1">
                <img src="../img/wall3.jpg" alt="" class="listimg2" />
            </div>    
            <div class="list1">
                <img src="../img/wall4.jpg" alt="" class="listimg3" />
            </div>    
            <div class="list1">
                <img src="../img/wall6.jpg" alt="" class="listimg4" />
            </div>    
            <div class="list1">
                <img src="../img/wall5.jpg" alt="" class="listimg5" />
            </div>
        </div>
        
        <script>
            $(function(){
                $('.list1').mouseover(function(){
                    $('.div1').children()[0].src = $(this).children()[0].src;
                });
                $('.div1').mousemove(function(e){                    
                    $('#zhezhao').CSS({
                        left: e.clientX-50+'px',
                        top: e.clientY-50+'px',
                        display: 'block'
                    });
                    var $img = $('.div1').children().eq(0);
                    $('.div2').empty();
                    $('.div2').append($img.clone());
                    $('.img1').css({
                            left: -(e.clientX-50)*2+'px',
                            top: -(e.clientY-50)*2+'px'
                        });
                    if(50>e.clientX||e.clientX>450||50>e.clientY||e.clientY>300) {
                        $('#zhezhao').css({
                            display: 'none'
                        });
                    }else{ //(400<e.clientX&&e.clientX<450||250<e.clientY&&e.clientY<300) 
                        $('#zhezhao').css({
                            left: e.clientX-50+'px',
                            top: e.clientY-50+'px',
                            display: 'block'
                        });
                    }
                });
            });
        </script>
    </body>
</html>

本功能在具体操作上还存在一些问题，当鼠标快速移开原图区域时，无法有效的监听到鼠标移出区域的事件，在考虑使用移出事件时，鼠标悬浮于原图上的遮罩层影响力鼠标在原图上的移出事件，无法很好的解决，希望各位帮忙移出事件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: jquery实现淘宝商品图片局部放大

本文链接: https://lsjlt.com/news/144531.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • jquery实现淘宝商品图片局部放大
    本篇博文用于简单记录图片放大功能实现，供大家参考，具体内容如下 功能实现还存在一些小漏洞在文章结尾提出，希望各位指正 1、图片放大初考虑将图片转换为字体图片形式，然后进行放大处理，但...
    99+
    2024-04-02
  • JavaScript实现淘宝网图片的局部放大功能
    本文实例为大家分享了JavaScript实现淘宝网图片的局部放大的具体代码，供大家参考，具体内容如下 要实现的效果如下： <!DOCTYPE html> <htm...
    99+
    2024-04-02
  • JavaScript怎么实现淘宝网图片的局部放大功能
    这篇“JavaScript怎么实现淘宝网图片的局部放大功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript...
    99+
    2023-06-30
  • 基于jQuery仿淘宝产品图片放大镜代码怎么编写
    本篇文章给大家分享的是有关基于jQuery仿淘宝产品图片放大镜代码怎么编写，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。今天给大家分享一款 &...
    99+
    2024-04-02
  • js怎么模拟实现淘宝网商品放大镜效果
    小编给大家分享一下js怎么模拟实现淘宝网商品放大镜效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！效果图：（实例图片由自己添加...
    99+
    2024-04-02
  • JavaScript实现淘宝商品图切换效果
    JavaScript之衣服相册切换效果（类似淘宝商品图切换），供大家参考，具体内容如下 话不多说，直接上代码： <!DOCTYPE html> <html la...
    99+
    2024-04-02
  • videojs+swiper实现淘宝商品详情轮播图
    本文实例为大家分享了videojs+swiper实现淘宝商品详情轮播图的具体代码，供大家参考，具体内容如下 这个引用了videojs和swiper。实现效果类似淘宝商品详情中的轮播图...
    99+
    2024-04-02
  • 纯CSS实现商品图片点击放大效果
    这篇文章给大家分享的是有关纯CSS实现商品图片点击放大效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。实现代码：CSS代码：CSS Code复制内容到剪贴板<style&...
    99+
    2024-04-02
  • JavaScript如何实现淘宝商品图切换效果
    这篇文章主要介绍了JavaScript如何实现淘宝商品图切换效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。JavaScript可以做什么1.可以使网页具有交互性，例如响应...
    99+
    2023-06-14
  • python实现局部图像放大
    本文实例为大家分享了python实现局部图像放大的具体代码，供大家参考，具体内容如下 import cv2 as cv import sys if __name__ == '_...
    99+
    2024-04-02
  • jQuery实现天猫商品放大镜效果
    本文实例为大家分享了jQuery实现天猫商品放大镜效果的具体代码，供大家参考，具体内容如下 思路： 1、分四部分：产品主图，用来定位的小框，放大图，和产品不同侧面的小图2、定位的小框...
    99+
    2024-04-02
  • Android仿淘宝商品浏览界面图片滚动效果
    用手机淘宝浏览商品详情时，商品图片是放在后面的，在第一个ScrollView滚动到最底下时会有提示，继续拖动才能浏览图片。仿照这个效果写一个出来并不难，只要定义一个Layout...
    99+
    2022-06-06
    淘宝 界面 图片 淘宝商品 动效 Android
  • JavaScript实现购物车图片局部放大预览效果
    目录一、实现效果二、代码实现三、获取像素信息跨域问题怎么解决四、总结与思考一、实现效果 二、代码实现 代码不多，先看一下 HTML 里面结构很简单，初始化 MagnifyingGl...
    99+
    2023-03-07
    JavaScript图片局部放大预览效果 JavaScript图片局部放大 JavaScript图片放大
  • jQuery如何实现天猫商品放大镜效果
    这篇“jQuery如何实现天猫商品放大镜效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“jQuery如何实现天猫商品放大镜...
    99+
    2023-06-29
  • vue3怎么实现淘宝放大镜效果
    实现效果实现思路我们实现动图的淘宝放大镜的效果需要4步。1.完成小图盒子、遮罩、大图盒子布局2.实现鼠标移动到小图盒子显示遮罩和大图盒子3.实现鼠标移动遮罩在小图盒子移动4.实现遮罩的移动范围不能超出小图盒子，且移动时带动大图图片移动完成小...
    99+
    2023-05-19
    Vue3
  • python用plotly实现绘制局部放大图
    目录最终效果展示实现思路导入库随机生成一些数据封装绘图代码开始绘制总结最终效果展示 实现思路 在绘图区域插入一个嵌入图，嵌入图与原图的绘画保持一致，通过限制嵌入图的x轴和y轴的显示...
    99+
    2024-04-02
  • JavaScript如何实现购物车图片局部放大预览效果
    这篇文章主要介绍了JavaScript如何实现购物车图片局部放大预览效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript如何实现购物车图片局部放大预览效果文章都会有所收获，下面我们一起来看看吧...
    99+
    2023-07-05
  • vue3怎么使用useMouseInElement实现图片局部放大预览效果
    本文小编为大家详细介绍“vue3怎么使用useMouseInElement实现图片局部放大预览效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue3怎么使用useMouseInElement实现图片局部放大预览效果”文章能帮助大家解决...
    99+
    2023-07-05
  • JavaScript如何实现仿淘宝放大镜效果
    这篇文章主要为大家展示了“JavaScript如何实现仿淘宝放大镜效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript如何实现仿淘宝放大镜效果”这篇文章吧。html代码&nbs...
    99+
    2023-06-25
  • Vue模仿实现京东商品大图放大镜效果
    效果如下： 首先，有一个放大镜的DOM结构 <template> <div class="spec-preview"> <!-- 展示的原...
    99+
    2022-12-27
    Vue放大镜效果 Vue模仿京东放大镜
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作