jQuery仿淘宝放大镜效果

「爱情、让人受尽委屈。」 2023-06-08 06:12 5阅读 0赞

## jQuery仿淘宝放大镜效果 ##

**html部分代码**

<div class="box1">  
            <img src="./img/1.jpg" alt="">
            <div class="p1">
            </div>
        </div>
        <div class="p2">
            
        </div>

**css部分代码**

<style>
            .box1{ 
                width: 400px;
                height: 400px;
                position: relative;
                
                cursor:move;
            }
            .box1 img{ 
                width: 100%;
                height: 100%;
            }
            .p1{ 
                width: 200px;
                height: 200px;
                position: absolute;
                top: 0;
                left: 0;
                background: rgba(0, 0, 0, .4);
                display: none;
            }
            .p2{ 
                width: 300px;
                height: 300px;
                overflow: hidden;
                display: none;
                background: url(./img/1.jpg) left top no-repeat;
                position:absolute;
                top: 50px;
                left: 450px;
            }
        </style>

**js部分代码**

<script src="./js/jquery-3.4.1.min.js">
            var box1width = $('.box1').width(); //获取商品展示容器的宽度
            var p1width = $('.p1').width();  //获取鼠标移上去后需放大部分的小方格宽度
            var p2width = $('.p2').width(); //获取显示放大部分的大方格的宽度
            var bl = box1width/p1width;  //商品展示容器与里边的小方格的比例
            var width = bl*p2width;   
            var bl2 = p2width/p1width;  //小方格与大方格的比例
            $('.p2').css({ 
                "background-size":width +"px "+width+'px'   //大方格显示的图片的大小（应与小方格的比例一致）
            })
            $('.box1').mousemove(function(e){ 
                $('.p1,.p2').show();    //鼠标移上时显示
                var box1left = e.currentTarget.offsetLeft; //大容器与视图窗口左边的距离
                var box1top = e.currentTarget.offsetTop; //大容器与视图窗口顶边的距离
                var left = e.clientX - box1left; //鼠标移动到的位置到视图窗口左边的距离
                var top = e.clientY - box1top; //鼠标移动到的位置到视图窗口顶边的距离
                var fgleft,fgtop;
                if(left<p1width/2){      //如果鼠标左右移动距离小于要显示的距离 左右移动不变
                    fgleft = 0;
                }else if(left>box1width - p1width/2){  //如果鼠标左右移动距离大于于要显示的距离 左右移动不变
                    fgleft = box1width - p1width;
                }
                else{ 
                    fgleft = e.clientX - box1left - p1width/2   //小方格要向右移动的距离
                }
                if(top<p1width/2){  //如果鼠标上下移动距离小于要显示的距离 上下移动不变
                    3
                    fgtop = 0;
                }else if(top>box1width - p1width/2){  //如果鼠标上下移动距离小于要显示的距离 上下移动不变
                    fgtop = box1width - p1width;
                }
                else{ 
                    fgtop = e.clientY - box1left - p1width/2 //小方格要向右移动的距离
                }
                $('.p1').css({  //小方格要移动的距离
                    "left":fgleft,  
                    "top":fgtop
                })
                $('.p2').css({   //右侧大方格要移动的距离
                    "background-position":-fgleft*bl2 + 'px '+ -fgtop*bl2 + 'px'
                })
            })
            $('.box1').mouseleave(function(){    //鼠标移除时隐藏
                $('.p1,.p2').hide();
            })
        </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery仿淘宝放大镜效果

jQuery仿淘宝放大镜效果 html部分代码 <div class="box1"> <img src="./img/1.jpg"

「爱情、让人受尽委屈。」/ 2023年06月08日 06:12/ 0 赞/ 6 阅读

相关 jQuery案例--仿淘宝精品栏

jQuery案例–仿淘宝精品栏在淘宝（今天我去找了找没找到）之前会有这样一个小窗口，推荐一些精品的东西，左边有推荐的东西，右边会有图片，鼠标放在商品名称上，商品名称的背

以你之姓@/ 2023年01月02日 11:25/ 0 赞/ 190 阅读

相关淘宝放大镜效果

效果图原理代码效果图 ![这里写图片描述][20160729191339022] 原理 ![这里写图片描述][20

青旅半醒/ 2022年09月24日 11:23/ 0 赞/ 249 阅读

相关 jquery特效-基于jQuery仿淘宝红色分类导航

今天给大家分享一款基于jQuery仿淘宝红色分类导航。这款分类导航适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果

快来打我*/ 2022年08月06日 12:10/ 0 赞/ 211 阅读

相关仿淘宝的放大镜效果

概述主要介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂的小功能，实际上原理却是非常的简单详细代码下载：[http:

浅浅的花香味﹌/ 2022年05月31日 11:17/ 0 赞/ 342 阅读

相关模仿淘宝放大镜。

一般在淘宝购物的时候都会有一个方法镜的功能，下面就给大家介绍一下这个放大镜实现的原理。简单的来说一下吧，其实实现这个是需要两张相同的图片。这两张图片除了大小必须完全一样。

傷城~/ 2022年03月20日 07:56/ 0 赞/ 328 阅读

相关京东淘宝放大镜

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

男娘i/ 2022年03月15日 00:14/ 0 赞/ 347 阅读

相关 js-淘宝放大镜

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dla

矫情吗；*/ 2022年03月12日 11:18/ 0 赞/ 360 阅读

相关 js原生淘宝京东宝贝放大镜效果

js实现商城放大镜效果效果： > 鼠标放上去会有半透明遮罩、右边会有大图片局部图。 > 鼠标移动时右边的大图片也会局部移动。 `技术点`： `Even

不念不忘少年蓝@/ 2022年01月07日 20:17/ 0 赞/ 329 阅读

相关放大镜jQuery效果

今天我们来写一下jQuery的效果来上代码 1,html代码 1 <div id='small'><img src="./icon/images/sj1

向右看齐/ 2021年10月01日 03:30/ 0 赞/ 507 阅读