JS4---javascript实现电商放大镜功能

最新推荐文章于 2022-10-24 17:48:40 发布
最新推荐文章于 2022-10-24 17:48:40 发布
阅读量259 收藏
点赞数 1
分类专栏： javascript 文章标签： js实现放大镜功能 电商放大镜
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XIAO_YuBaby/article/details/98784426
版权

电商放大镜

在这里插入图片描述

一.一些零碎知识点

1.style只可以获取行内样式,但可以修改
window.getComputedStyle可以获取在浏览器的所有样式，但不能修改
2.若运用的是子元素一定要加children[]
eg: middle.children[ 0 ].src middle下边的第一个子元素的src属性

二.html代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/js.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .big{
            margin: auto;
            width: 350px;
            height: 500px;
            position: relative;
        }
        .middle{
            width: 350px;
            height: 420px;
            border: solid 1px silver;
            position: relative;
        }
        .middle img{
            width: 100%;
            height:100%;
        }
        .small{
            width: 350px;
            height: 80px;
            font-size: 0;   /*块变行级块之间会有缝隙，用font-size:0；清除缝*/
            border-top: solid 1px silver;   /*线*/
            padding-top: 10px;
            position: relative;
        }
        .s-photo{
            display: inline-block;
            width: 60px;
            height: auto;
            margin-left: 5px;
            border: solid 3px transparent;
        }
        .s-chang{
            width:520px;
            /*margin-top: 11px;*/  /*给mar会往下移，给上边框一条线*/
            margin-left: 0;
            -webkit-transition:  margin-left .4s linear;
            -moz-transition: margin-left .4s linear ;
            -o-transition: margin-left .4s linear ;
            transition:  margin-left .4s linear;
        }
        .s-duan{
            width: 310px;
            height: 60px;
            overflow: hidden;
            margin: auto;
        }
      .small span{
            font-size: 15px;
            width: 20px;
            height: 78px;
            line-height: 78px;
            display: inline-block;
            position: absolute;
            text-align: center;
            background: silver;
            cursor: pointer;
        }
        .btn-left{
            top: 0;
            left: 0;
        }
        .btn-right{
            top: 0;
            right: 0;
        }


        另一种两个按钮的写法
/*        /!*两种写法  一种用span，一种用伪类选择器*!/
        .s-duan::before,.s-duan::after{
            height: 80px;
            width: 20px;
            font-size: 15px;
            position: absolute;
            text-align: center;
            line-height: 80px;
        }
        .s-duan::after{
            content: ">";
            top: 0;
            right: 0;
        }
        .s-duan::before{
            content: "<";
            top: 0;
            left: 0;
        }*/


        .mid-src{
            position: absolute;
            width: 150px;
            height: 200px;
            background: url("images/bg.png") ;
            -webkit-background-size: 5px 5px;
            background-size: 5px 5px;
            display: none;    
            cursor: move;          //让鼠标放上去变成移动态
        }
        .big-right{
            width: 350px;
            height: 520px;
            border: solid 1px silver;
            position: absolute;
            left: 349px;
            display: none;
            background: url("images/big1.jpg") no-repeat;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="big-right"></div>
        <div class="middle">
            <div class="mid-src"></div><!--层-->
            <img src="images/middle1.jpg" alt=""/>
        </div>
        <div class="small">
            <span class="btn-left"><</span>
            <div class="s-duan">
                <div class="s-chang">                    //不停的写div让图片隐藏
                    <div class="s-photo"><img src="images/small1.jpg" data-big="images/big1.jpg" data-src="images/middle1.jpg" alt=""/></div>
                    <div class="s-photo"><img src="images/small2.jpg" data-big="images/big2.jpg" data-src="images/middle2.jpg" alt=""/></div>
                    <div class="s-photo"><img src="images/small3.jpg" data-big="images/big3.jpg" data-src="images/middle3.jpg" alt=""/></div>
                    <div class="s-photo"><img src="images/small4.jpg" data-big="images/big4.jpg" data-src="images/middle4.jpg" alt=""/></div>
                    <div class="s-photo"><img src="images/small5.jpg" data-big="images/big5.jpg" data-src="images/middle5.jpg" alt="" /></div>
                    <div class="s-photo"><img src="images/small6.jpg" data-big="images/big6.jpg" data-src="images/middle6.jpg" alt=""/></div>
                    <div class="s-photo"><img src="images/small7.jpg" data-big="images/big7.jpg" data-src="images/middle7.jpg" alt=""/></div>
                    <div class="s-photo"><img src="images/small8.jpg" data-big="images/big8.jpg" data-src="images/middle8.jpg" alt=""/></div>
                </div>
            </div>
            <span class="btn-right">></span>
        </div>
    </div>
</body>
</html>
二.js代码
1.实现鼠标放到小图上，小图边框变为红色
借助temp变量，存储鼠标移动后的前一个框
 var temp;
 window.onload=function(){
 var sphoto =document.getElementsByClassName("s-photo");
 var middle =document.getElementsByClassName("middle")[0];
 temp=document.getElementsByClassName("s-photo")[0];
 temp.style.borderColor = "red";
 
 for(var i=0;i<sphoto.length;i++){
 sphoto[i].onmouseenter = function(){
 temp.style.borderColor="transparent";
 this.style.borderColor="red";
 temp=this;
 console.log(this.children[0].getAttribute("data-src"))
 middle.children[0].src = this.children[0].getAttribute("data-src");
 }
 }
 }
2.点击左右两个span，small中的图片移动
    btnleft.onclick=function(){
        schang.style.marginLeft="0";
    }
    btnright.onclick=function(){
        schang.style.marginLeft=-212+"px";
    }
3.让鼠标放在midsrc(阴影层)的中间
 x=x-big.offsetLeft-parseFloat(window.getComputedStyle(midsrc).width)/2;  /*style只可以获取行内样式  window.get可以获取在浏览器的所有样式，但不能修改*/
 y=y-big.offsetTop-parseFloat(window.getComputedStyle(midsrc).height)/2;   /*左偏移量相对于父元素的偏移量*/
4.将阴影层限制在middle框中
      var bigleft = (parseFloat(window.getComputedStyle(middle).width))-parseFloat(window.getComputedStyle(midsrc).width);
        var bigtop = (parseFloat(window.getComputedStyle(middle).height))-parseFloat(window.getComputedStyle(midsrc).height);
       /* console.log(bigleft);
        console.log(bigtop);*/

        if(x<=0 ){
            x=0;
        }
       else{  /*x>0*/
            if(x>=bigleft){
                x=bigleft;
            }
            else{}
        }
        if(y<0){
            y=0;
        }
        else{  /*y>0*/
           if(y>=bigtop){
               y=bigtop;
            }
            else{}
        }
        midsrc.style.left = x + "px";
        midsrc.style.top = y + "px"

5.将图片一一对应

 middle.children[1].src = this.children[0].getAttribute("data-src");    //middle下的img（第二个子元素）   div下的img
 bigright.style.backgroundImage="url(" + this.children[0].getAttribute("data-big") + ")";       //this指代当前所对应的sphoto

6.鼠标移动阴影层后大图也跟着移动

 bigright.style.backgroundPosition = (-x / 0.4375) + "px " + (-y / 0.525) + "px";

7.完整代码如下

var temp=null;
window.onload=function(){
    var sphoto =document.getElementsByClassName("s-photo");
    var middle =document.getElementsByClassName("middle")[0];
    var big = document.getElementsByClassName("big")[0];
    var btnleft =document.getElementsByClassName("btn-left")[0];
    var btnright =document.getElementsByClassName("btn-right")[0];
    var schang=document.getElementsByClassName("s-chang")[0];
    var midsrc=document.getElementsByClassName("mid-src")[0];
    var bigright=document.getElementsByClassName("big-right")[0];

    temp=document.getElementsByClassName("s-photo")[0];
    temp.style.borderColor="red";
    for(var i=0;i<sphoto.length;i++){
       sphoto[i].onmouseenter=function(){
           temp.style.borderColor="transparent";
           this.style.borderColor="red";
           temp=this;//将当前对象存在temp中，鼠标动下一个时，当前对象变为透明
           middle.children[1].src = this.children[0].getAttribute("data-src");//middle下的img（第二个子元素）   div下的img
           bigright.style.backgroundImage="url(" + this.children[0].getAttribute("data-big") + ")";//this指代当前所对应的sphoto
       }
    }
    //左右点击事件
    btnleft.onclick=function(){
        schang.style.marginLeft="0";
    }
    btnright.onclick=function(){
        schang.style.marginLeft=-212+"px";
    }
    //mid-src移动
    middle.onmouseenter=function(){
       midsrc.style.display="block";
        bigright.style.display="block";
    }
    middle.onmouseleave=function(){
       midsrc.style.display="none";
        bigright.style.display="none";
    }
    middle.onmousemove=function(e){
        var x= e.pageX || e.clientX;
        var y= e.pagesY || e.clientY;
        /*先让鼠标随着篮框移动*/
        x=x-big.offsetLeft-parseFloat(window.getComputedStyle(midsrc).width)/2;  /*style只可以获取行内样式  window.get可以获取在浏览器的所有样式，但不能修改*/
        y=y-big.offsetTop-parseFloat(window.getComputedStyle(midsrc).height)/2;   /*左偏移量相对于父元素的偏移量*/
       console.log(x);
        console.log(y);
        /* 限制x y；*/
        var bigleft = (parseFloat(window.getComputedStyle(middle).width))-parseFloat(window.getComputedStyle(midsrc).width);
        var bigtop = (parseFloat(window.getComputedStyle(middle).height))-parseFloat(window.getComputedStyle(midsrc).height);
       /* console.log(bigleft);
        console.log(bigtop);*/

        if(x<=0 ){
            x=0;
        }
       else{  /*x>0*/
            if(x>=bigleft){
                x=bigleft;
            }
            else{}
        }
        if(y<0){
            y=0;
        }
        else{  /*y>0*/
           if(y>=bigtop){
               y=bigtop;
            }
            else{}
        }
        midsrc.style.left = x + "px";
        midsrc.style.top = y + "px";  /*midsrc的位置就是鼠标位置计算出来，所以跟着鼠标移动*/

        bigright.style.backgroundPosition = (-x / 0.4375) + "px " + (-y / 0.525) + "px";
        //中图  350  420  大图  800  800   0.4375    0.525
          //  midsrc 150  200  303  大图与中图的比等于mid-scr与  的比

    }
}
XIAO_YuBaby
关注
专栏目录
原生JS实现电商平台图片放大（放大镜功能）
weixin_41105030的博客
03-19 2339
先看看某宝的效果 好多美女。。。我们是来干正事的，如图当我们移动蓝色框，右边随着移动 我们可以利用值准备一张图片，使用transform:scale(*)来实现放大缩小；也可以准备两张图片，一张大一张小的来实现，这里我准备了两张(400400,800800) 结构 small为400的图片，big为800的图片 <div class="box"> <!-- 存放左边图片和...
javascript实现电商放大镜效果
01-21
本文实例为大家分享了javascript实现电商放大镜效果的具体代码，供大家参考，具体内容如下 学习内容： 1、event.pageX 属性返回鼠标指针的位置，相对于文档的左边缘。 2、clientX 事件属性返回当事件被触发时鼠标...
JS实现电商放大镜效果
10-19
主要为大家详细介绍了JS实现电商放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【前端笔记】js实现购物网站放大镜效果
supercolorpower的博客
08-05 878
首先确定放大镜效果的需求： 1.鼠标进去 产生小方块 2.小方块移动 3.移动边界判断 4.产生大图 5.大图移动跟随 效果图如下： 原理是这样的：左边的框框是固定的，鼠标移进去的时候才会出现右边的大框框和里面对应的图片，通过display来设置。大框框的overflow设置为hidden，里面的图片是按你自己设置的比例扩大的，位置是跟随鼠标的移动改变的。注意：鼠标移动的方向是和大图片相...
js-实现放大镜功能
CnHQuY的博客
11-14 132
js实现放大镜功能 1、效果图 如下： （ps:代码种的img 均是 我自己项目路径下的图片） 2、html代码： 3、css代码： * {margin: 0;padding: 0;} img { vertical-align: top; } .box { width: 450px; height: 450px; margin:100px;
图片轮播
木易一
03-28 4881
一、淡入淡出 轮播特点： 实现图片自动以淡入淡出的方式轮播，当鼠标悬停在图片上面的时候轮播停止； 图片下面表示顺序的原点会随着图片切换颜色改变，当鼠标悬停在圆点上时图片切换为鼠标当前悬停的圆点对应的图片； 图片两边代表左右的箭头在点击的时候切换前后的图片； 图片的淡入淡出轮播，可以理解为每一张图片切换到最上面的时候透明度由0慢慢变为1； <!DOCTYPE html&g...
前端必学——用JavaScript实现电商图片放大镜效果（附代码）
m0_60273757的博客
10-22 5708
前言 放大镜可以说是前端人必须学会的程序之一！今天本美女就用京东距离为大家展示一下怎么实现放大镜的效果！相比较html和css而言，js更重要的就是你需要想明白程序的思想以及怎么一步步实现自己的想法，话不多说开整！ 代码思想 HTML部分 主要是两个盒子： CSS部分 JavaScript部分 代码步骤 代码实现 百度网盘链接（图片及全部代码）：https://pan.baidu.com/s/1jS3V_GvzmC49PfTvZKN9Uw百度...
Vue实现电商网站商品放大镜效果
最新发布
前端小白, 稀土：雩风十六
10-24 877
放大镜功能的核心实现思路就是两张图，一大一小，计算光标预览区域左上角的坐标，然后根据两张图所在div的对应宽高比，等比反方向移动大图，溢出部分设置，从而实现放大镜的效果在css3的实现方法中，可以使用，来设置图片的移动，此外还可以使用js获取标签进行对应属性的更改。这里面主要是对pageX、pageY、offsetX、offsetY、offsetLeft、offsetTop、clientX、clientY等的区分使用。
JS实现电商商品展示放大镜特效
10-15
在本文中，我们将介绍如何使用JavaScript（JS）实现一个电商商品展示放大镜特效。这种特效可以使用户在浏览网页上的商品时，通过鼠标悬停在一个小的预览图上，来放大查看商品的细节图片。这种效果在很多电子商务网站...
电商缩略图及放大镜
05-26
在电商网站设计中，缩略图与放大镜功能是至关重要的元素，它们直接影响到用户的浏览体验和购买决策。本文将详细解析这两个功能的核心知识点，并探讨如何有效地实施它们。 首先，缩略图通常用于商品列表页面，展示...
UGUI 按钮事件案例
陈言必行 -- Unity游戏开发领域优质博主
09-10 1424
动态为按钮注册方法 通过方法获取点击按钮名称（知道那个按钮被点击） 切换图片的方法
JS实现放大镜功能
热门推荐
weixin_40758850的博客
04-22 1万+
我是看完教学视频做的，一开始发现自己能实现放大，但有个小bug：显示的位置不大对应，原因：mask，box(=小图的宽)，big，bImg的宽不能随便设置，需按照比例，否则mask覆盖区域与显示出的大图区域不符。 它主要有2个比例关系： //放大显示区域的对应比例=====在CSS里设置 mask的宽 / box的宽 = big的宽 / bImg的宽 //大图对应移动（鼠...
JS20---JS中添加矢量图标 iconfont
XIAO_YuBaby的博客
09-19 1373
①阿里矢量图标库中找到你所需要的图标，添加至购物车，然后选择添加至项目 确定键后下载至本地，是一个压缩包形式 ②将压缩后的文件复制到编程文件中（不可以直接移动文件到编程文件中） ③header中写link 将图标文件链接到编程代码中 <link rel="stylesheet" href="icon/iconfont.css"> ④使用字体图标 <span class="ico...
JS15---js中的模式
XIAO_YuBaby的博客
09-04 540
一.工厂模式 实例化对象 返回对象 优点：解决创建多个对象的问题 缺点：所创建的对象类型都一致，没办法区分对象的类型 function factory(name1,sex1,age1){ var obj=new Object(); //实例化对象 obj.name=name1; obj.sex=sex1; obj.age=age...
JS1----用js实现计算器
XIAO_YuBaby的博客
08-05 519
计算器 计算器的HTML部分 一些零碎的知识点 1.HTML中的知识 ①cellpadding=0 cellspacing=0 单元格间距为0 ②online=none 去除按钮点击后出现的蓝边框 ③colspan 合并列 rowspan合并行 （写到td中） ④tr th td ⑤表格本身是没有边框线的，需要自己加border ⑥给文本框中加disabled表示不能输入...
JS9---js内置对象---三大计时器
XIAO_YuBaby的博客
08-16 403
js内置对象 window(顶级对象) history location document 内置对象 Date Math String Array 一. window 1.①window.alert(); ②window.confirm(); 带确认取消的提示框 ③window.prompt(); 带输入框的提示框 2.js中的全局变量，也在window中（可以通过window. 出来） ...
JS6---字符串算法
XIAO_YuBaby的博客
08-12 397
字符串的常规方法 1.concat 拼接字符串 var a="123"; var b="456"; console.log(a.concat(b)); //123456 console.log(a.concat(b).concat(a)); //123456123 2.indexOf 从左向右去找字符，并返回索引或-1 注意：不管从那个...
JS7---数组算法
XIAO_YuBaby的博客
08-12 389
数组的常规算法 一. 数组的赋值及声明 length为数组的唯一属性 Array JS中的内置对象 数组为object对象（object为浏览器最大对象），所以数组什么数据类型都可装 数组简化声明 var arr=[ ]; var arr=new Array(); //new 初始化新建对象 console.log(typeof (arr)); //objec...
纯javascript打造电商商品放大镜效果实现与封装
本文将详细介绍如何使用纯JavaScript实现一个电商网站中的放大镜效果，避免了依赖第三方插件可能带来的复杂性和定制需求。首先，作者分享了一个基础的实现过程，包括HTML、CSS和JavaScript代码。 在HTML部分，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值