js实现购物网站商品放大镜效果

本文实例为大家分享了js实现购物网站商品放大镜效果的具体代码,供大家参考,具体内容如下

首先说一下原理,以天猫某商品放大镜效果为例:

所谓的放大镜效果,其实也是欺骗我们眼球的一种效果,这里我们可以看到,图片显示去下面那一排小图与遮盖层的图片和放大层的图片其实是一样的,只是分辨率不同,所以实现放大镜效果,就需要这么几组分辨率大小不同,但是图片内容相同的图片:

显然,小图中放的就是我这里图片名中带有small的小图了,遮盖层就是正常大小的图,放大层就是带有big的放大的图了,然后再加入适当的位移和显示效果,就达成我们见到的放大镜效果了,下面就通过代码来实现吧:

首先写出HTML结构:

<div id="box">
    <div class="show">
        <img src="./images/1.jpg" alt="#">
        <div class="drag"></div>
    </div>
    <div class="magnify"></div>
    <ul>
        <li class="active"><img src="./images/1.small.jpg" alt="#"></li>
        <li><img src="./images/2.small.jpg" alt="#"></li>
    </ul>
</div>

<script type="text/javascript" src="./javascript/mgfyGlass.js"></script>

<script>
    const oBox = document.querySelector('#box');

    const imgArr = [
        {small: '1.small.jpg', normal: '1.jpg', big: '1.big.jpg'},
        {small: '2.small.jpg', normal: '2.jpg', big: '2.big.jpg'}
    ];
</script>

然后加入css样式:

body,div,ul,li{
    margin: 0; padding: 0;
    list-style: none;
    font-size: 0;
}
img{
    display: block;
}
#box{
    width: 650px;
    position: relative;
    margin: 0 auto 0 240px;
}
#box .show{
    width: 600px;
    border: solid 2px hotpink;
    position: relative;
}
#box .show img{
    width: 100%;
}
#box .show .drag{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #e0a8d7;
    opacity: .4;
    left: 0;
    top: 0;
    display: none;
}
#box .magnify{
    width: 800px;
    height: 800px;
    border: solid 2px #7d777b;
    position: absolute;
    left: 100%;
    top: 0;
    background: url("../images/1.big.jpg") no-repeat 0 0 / 2400px;
    display: none;
}
#box ul{
    width: 100%;
    height: 150px;
    margin-top: 20px;
}
#box ul::after{
    content: '';
    display: block;
    clear: both;
}
#box ul li{
    height: 100%;
    float: left;
    margin: 0 8px;
    border: solid 2px #fff;
}
#box ul li.active{
    border-color: hotpink;
}
#box ul li img{
    height: 100%;
}

这里设置css样式的时候需要注意:

放大层是通过遮盖层等比放大的,所以放大层的宽高与遮盖层宽高的比,和,放大层背景图大小与正常显示图片(也就是class=“show” 盒子中的图片)大小的比是相同的。

这里需要用js来实现几个效果:

1、鼠标移入正常图片盒子时遮盖层和放大层盒子显示,鼠标移出正常图片盒子时遮盖层和放大层盒子隐藏
2、定位遮盖层位置,让它随着鼠标在 正常图片盒子 内移动,同时放大层图片对应的在放大层盒子内移动
3、设置小图切换效果,并在小图切换的同时,正常图片和放大图切换到对应图片

然后上代码:

class MgnGlass {
    constructor(ele, array) {
        this.ele = ele;
        this.array = array;

        this.show = ele.querySelector('.show');
        this.showImg = this.show.querySelector('img');
        this.drag = ele.querySelector('.drag');
        this.magnify = ele.querySelector('.magnify');
        this.oUl = ele.querySelector('ul');
        this.oUlis = ele.querySelectorAll('ul li');
    }

 // 定义一个方法,来调用之后定义的所有的方法
    // 入口函数
    init() {
        this.setMouse();
        this.setPosition();
        this.setTab();
    }

    // 鼠标的移入移出
    setMouse() {
     // 鼠标移入,图片区域show,让遮盖层和放大镜显示
        this.show.addEventListener('mouseover', () => {
            this.drag.style.display = 'block';
            this.magnify.style.display = 'block';
        });
        // 鼠标移出,图片区域show,让遮盖层和放大镜隐藏
        this.show.addEventListener('mouseout', () => {
            this.drag.style.display = 'none';
            this.magnify.style.display = 'none';
        });
    }

 // 设置定位效果
 // 鼠标在 图片区域移动 时
    // 1,让遮盖层,跟随鼠标移动 --- 类似之前鼠标拖拽的效果
    setPosition() {
        this.show.addEventListener('mousemove', (e) => {
            e = e || event;
            // 1,定位 遮盖层
            // 通过 鼠标的定位位置,来计算 遮盖层 左上角 定位的坐标位置
            let x = e.clientX - this.ele.offsetLeft - this.ele.clientLeft - this.drag.clientWidth / 2;
            let y = e.clientY - this.ele.offsetTop - this.ele.clientTop - this.drag.clientHeight / 2;

   // 2,设定边界值
            // 最小是 0  最大值 父级div宽高 - 遮盖层宽高
            if (x < 0){
                x = 0;
            }
            else if (x > (this.show.clientWidth - this.drag.clientWidth)){
                x = this.show.clientWidth - this.drag.clientWidth;
            }
            if (y < 0){
                y = 0;
            }
            else if (y > (this.show.clientHeight - this.drag.clientHeight)){
                y = this.show.clientHeight - this.drag.clientHeight;
            }

   // 3,将数值定位给遮盖层
            this.drag.style.left = x + 'px';
            this.drag.style.top = y + 'px';

   // 4,需要让右侧放大镜的背景图片也一起移动
            // 给背景图片添加定位
            // 左侧是 图片不动,遮盖层动      遮盖层动  100  100
            // 右侧是 放大镜不动,背景图片动  背景图动 -100 -100
            // 移动时,定位必须是按照比例来设定

   // 背景图片定位 = 背景图片大小 * 遮盖层定位 / 图片大小
            // 通过遮盖层移动的比例,来计算,背景图片定位的数值
            let backX = 2400 * x / 600;
            let backY = 2400 * y / 600;

   // 给背景图片定位
            // 给背景图片进行定位赋值操作
            this.magnify.style.backgroundPosition = `-${backX}px -${backY}px`;
        })
    }

 // 切换效果
    // 1,给当前鼠标经过mouseover 的标签,添加样式
    //   给所有的标签去除样式,给当前点击/经过标签,添加样式
    setTab() {
        this.oUlis.forEach((item, key) => {
            item.addEventListener('mouseover', () => {
             // 1,给所有的li标签清除样式
                this.oUlis.forEach((item2) => {
                    item2.className = '';
                });
                // 2,给当前的标签添加样式
                item.className = 'active';

    // 3,设定图片
                // 当前标签的索引下标 key 就是对应 图片数组中,需要显示的图片的索引下标

                // 1,给图片标签,设定路径
                // 通过数组,索引,图片属性,获取对应的图片名称
                // 标签.src = 赋值   或者  标签.setAttribute('src' , 属性值) 都可以
                this.showImg.setAttribute('src', `./images/${this.array[key].normal}`);
                // 2,给放大镜区域,背景图片设定路径
                // 必须把关于背景图片的所有设定都重新写一遍
                this.magnify.style.background = `url('./images/${this.array[key].big}') no-repeat 0 0 / 2400px`;
            })
        })
    }
}

要完美实现放大镜效果,必须注意2个比例:

1、CSS样式的比例 : 图片区域大小 : 遮盖层大小 = 背景图片大小 : 放大镜区域大小
2、定位的比例 : 遮盖层定位 : 图片区域大小 = 背景图片定位 : 背景图片大小

然后在调用我们的构造函数即可得到最终的HTML,执行即可达到我们的放大镜效果了:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>放大镜</title>
    <link rel="stylesheet" type="text/css" href="./css/mgfyGlass.css" >
</head>
<body>
    <div id="box">
        <div class="show">
            <img src="./images/1.jpg" alt="#">
            <div class="drag"></div>
        </div>
        <div class="magnify"></div>
        <ul>
            <li class="active"><img src="./images/1.small.jpg" alt="#"></li>
            <li><img src="./images/2.small.jpg" alt="#"></li>
        </ul>
    </div>

    <script type="text/javascript" src="./javascript/mgfyGlass.js"></script>

    <script>
        const oBox = document.querySelector('#box');

        const imgArr = [
            {small: '1.small.jpg', normal: '1.jpg', big: '1.big.jpg'},
            {small: '2.small.jpg', normal: '2.jpg', big: '2.big.jpg'}
        ];

        const mgnGlass = new MgnGlass(oBox, imgArr);

        mgnGlass.init();

    </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-10-09

电子商务网站上的常用的js放大镜效果

复制代码 代码如下: jsFiddleRun again Edit this fiddle Result HTML <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>放大镜</title> <style> img{ vertical-align:bottom;} .mod_zoom{ overflow:hidden; zoom:

原生js写的放大镜效果

我的大体思路是:时时监听鼠标的坐标,当鼠标移动时,透明层随着鼠标移动,大图片相对透明层的移动而移动.不废话了,看代码. 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>放大镜</title> <meta name="Keywords" content=""> <me

图片放大镜jquery.jqzoom.js使用实例附放大镜图标

1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Author Doc. Ing. Renzi

js图片放大镜效果实现方法详解

由项目需要,原生写了个详情页图片放大镜的效果,扔上代码供学习分享,也作为日常笔记... 效果如图(例子中偷偷链了张天猫的图片,希望没啥事 -.-): 实现过程教简单,但我们还是从css开始分析,过程如下(图片已正方形为例): css: /* 图片容器 */ .imgBox{ width: 200px; /* 各位大老爷们看着办 */ height: 200px; /* 各位大老爷们看着办 */ position: relative; /* 必需 */ } /* 图片标签 */ .mainImg{

js放大镜放大图片效果

我们 js图片放大镜 body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; le

奇妙的Javascript图片放大镜

在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜.现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果. 制作思路:"放大镜"后有一幅背景图,它是"放大了"的图的原本.我们通过移动"放大镜"时适当调整背景图的位置,使它显示的刚好是需要要放大的部分. 效果演示: (点这里在新窗口中查看) 制作步骤: 1)先准备两幅内容相同尺寸不同的图片,这里我们找了一个400×300像素的缩略图small_hill.gif,一

JavaScript 图片放大镜(可拖放、缩放效果)第1/4页

前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]

JavaScript图片放大镜效果代码[代码比较简单]

#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op

用js实现放大镜的效果的简单实例

第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery

JavaScript 图片切割效果(放大镜)第1/4页

上一个版本由于是初次接触这类效果,而且是三个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了. 近来我把其中的 拖放效果 和 缩放效果 单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了. 要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考 图片切割系统 . 效果预览请看这里 完整实例下载代码太多贴不出来,只好给个效果图: 程序说明 这个效果主要分三个部分:层的拖放.层的缩放.图片切割(包括预览). 其中 层的拖放 和 层的缩放 我已经在其他两篇

JavaScript图片放大技术(放大镜)实现代码分享

复制代码 代码如下: <!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"> <head> <meta http-equiv=&qu

javascript图片滑动效果实现

本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图: 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>sliding doors</title> <link rel="stylesheet" href

一个简单的javascript图片放大效果代码

一个简单的图片放大效果: 参数说明: 1.berviary:String,需要被放大的图片id 2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div. 3.clip:object,裁剪区域的大小,即鼠标移动到需要放大的图片上时,突出显示需要被放的大区域 4.opacity:float,放大时图片被遮罩的区域的透明度 效果1: 调用的js代码: 复制代码 代码如下: $E({berviary:"currentPic&

JavaScript 图片放大效果及代码说明

Magnifier #magnifier{ width:342px; height:420px; position:absolute; top:100px; left:250px; font-size:0; border:1px solid #000; } #img{ width:342px; height:420px; } #Browser{ border:1px solid #000; z-index:100; position:absolute; background:#555; } #m

简单实现JavaScript图片切换效果

JavaScript实现图片切换,主要用到setInterval()函数和clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义全局变量作为标志,标志返回setInterval()函数的id,id作为clearInterval()函数的引用,目的是为了告诉clearInterval()函数动画暂停的位置.下面是实现的代码: 部分HTML代码:第一个为左按钮,是一张带箭头的透明图片,点击实现图片右滑动,第二个为图片展示区域,第

javascript 图片放大效果函数

/*pre css reset*/ body,th,td { font-size:12px;font-family:Tahoma,Helvetica,Arial,'\5b8b\4f53','\5FAE\8F6F\96C5\9ED1',sans-serif; } body,th,td,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p { margin:0;padding:0; }

JS实现鼠标移动到缩略图显示大图的图片放大效果

一个网页上用的图片提示效果,当把鼠标移动到图片缩略图的时候,会显示图片大图,似乎在网上这是个很常见的效果,实现方法也比较多,有人用CSS,有人用JavaScript,有人用jQuery,总之,选择自己习惯的方式去实现,就是最棒的. 图片提示效果 body{margin:0 ;padding:40px;line-height:180%;} img{border:none;} ul,li{margin:0 ;padding:0;} li{list-style:none;display:inline;

JavaScript 拖拉缩放效果

这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放. 跟拖放效果一样,程序的原型也是在做图片切割效果的时候做出来的.但这个效果的参考少的多,基本上靠自己摸索,走了不少弯路,现在总算把自己想要的效果做出来了,程序跟上一个版本比较也已经"面目全非",还是觉得有很多需要改进的地方,就像永远没有最完美的土耳其地毯. 这里也有一个简化版的SimpleResize,方便学习. 在线测试 http://img.jb51.net/online/R

javascript实现的图片切割多块效果实例

本文实例讲述了javascript实现的图片切割多块效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&quo