JS-案例-简单放大镜效果

最新推荐文章于 2024-01-29 23:55:28 发布
最新推荐文章于 2024-01-29 23:55:28 发布
阅读量216 收藏
点赞数
分类专栏： 案例 文章标签： JS 放大镜 拖拽 商品显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45092792/article/details/93986455
版权

封装js，主要用到ce  用来创建div的样式

var Utils=(function () {
    return {
        //SSS
        loadImg:function (srcList,callBack) {
            var img=new Image();
            img.num=0;
            img.imgList=[];
            img.srcList=srcList;
            img.callBack=callBack;
            img.addEventListener("load",this.loadHandler);
            img.src="./img/"+srcList[img.num];

        },
        loadHandler:function (e) {
            // console.log(this.num);
            // console.log(this.imgList);
            // console.log(this.callBack);
            this.imgList.push(this.cloneNode(false));
            this.num++;
            if(this.num>=this.srcList.length){
                this.callBack(this.imgList);
                return;
            }
            //事件侦听没有被删除,只需更改src,加载后仍然触发了该事件,进入该函数
            this.src="./img/"+this.srcList[this.num];
        },
        ce:function (type,style) {
            var elem=document.createElement(type);
            Object.assign(elem.style,style);
            return elem;
        },
        randomColor:function () {
            var col="#";
            for(var i=0;i<6;i++){
                col+=Math.floor(Math.random()*16).toString(16);
            }
            return col;
        }
    }
})();

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=
最低0.47元/天 解锁文章
joker.ma
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript基础 - 经典案例4 -放大镜 (含公式)
never_stop_study的博客
10-06 1041
JavaScript基础 - 经典案例4 -放大镜 (含公式)
使用js实现放大镜效果案例
03-27
具体图片模块展示：例如商品图片鼠标放置展示更大的效果图 适用于购物网站或作品图展示的初级网站效果插入
html中放大镜案列,HTML放大镜的一种实现及原理讲解（js）
weixin_36299472的博客
06-15 849
0.效果预览预览.png上下方的宽度和高度指的是图片内可移动滑块的长宽，下文以‘放大镜’来称呼该滑块。基本功能移动放大镜来选择需要放大的区域。可以根据需求调整放大镜尺寸和倍数，默认放大镜尺寸为50px*50px，放大倍数为2倍。上下滑动鼠标滚轮来放大(缩小)放大镜尺寸。下方实时显示放大镜当前尺寸和放大倍数。eg: 调整放大镜大小来显示一行英文image.png1.原理讲解HTML部分Setting...
js 仿京东放大镜
不想起床
10-17 325
功能模块 整个案例可以分为三个功能模块 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能 黄色的遮挡层跟随鼠标功能。 移动黄色遮挡层，大图片跟随移动功能。 案例分析 黄色的遮挡层跟随鼠标功能。 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。 首先是获得鼠标在盒子的坐标。 之后把数值给遮挡层做为left 和top值。 此时用到鼠标移动事件，但是还...
JS之放大镜案例
最新发布
m0_74577714的博客
01-29 1757
/鼠标的距离 - 盒子距离浏览器的距离 - 盒子自身一半的距离 = 向左或者向上距离阴影盒子的距离。//因为图片是从右向左移,所以要是-的x和y,大图片比小的大2倍,乘于2。让我为大家带来一个关于放大镜的实现方法吧！//给小图片盒子设置移入事件。//移入大图片盒子显示。//小盒子鼠标移动事件。//移入阴影盒子显示。//移出阴影盒子隐藏。
JS实现图片放大镜效果
L289121的博客
09-22 208
1.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为block 2.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为none 3.通过event对象获取鼠标的当前坐标位置，即方法event.layerX,event.layer.Y,然后通过放入鼠标事件onmoursemove监听，不停的将透明小区域的top和left置为event.layerX,event.layer.Y的值 代码 <!DOCTYPE
JavaScript实现放大镜效果代码示例
10-15
JavaScript实现的放大镜效果是一种常见的网页交互功能，它允许用户在鼠标悬停在小图上时，通过一个浮动的放大窗口预览图像的细节。这种效果常见于电子商务网站的产品图片展示，增强了用户体验，使得用户无需点击就能...
js仿京东放大镜效果
10-14
在本文中，我们将深入探讨如何使用JavaScript实现一个类似于京东商品展示中的放大镜效果。这种效果允许用户在浏览商品图片时，通过鼠标悬停在图片上看到一个放大的部分，从而提供更清晰的细节视图。下面我们将逐步...
javascript经典特效---图片放大镜效果.rar
01-04
在这个案例中，"javascript经典特效---图片放大镜效果.rar" 提供的是一个使用JavaScript实现的图片放大镜效果。这个效果通常用于在线购物网站，允许用户通过鼠标悬停在小图上，查看产品的局部细节，提升用户体验。 ...
用js实现放大镜的效果的简单实例
11-23
第一次发博客，还有点小激动，本人现在正在天津上大学，希望以后从事前端这一行业，学习的时间不长，写博客为了记录自己的学习过程和收获，当然也算是巩固。可能写的东西不会像大牛那样高大上，只是一些基本的内容，当然我也会收藏一些我认为好的，不错的文章（其实最主要是我能看懂。。。。）。我相信以后自己也能够写出高大上的东西。加油！ 废话说的有点多，说正事。前几天看了一段潭州教育的教学视频，其中的老师是用JQuery实现放大镜的效果（老师讲的是在是太慢，各种乱扯，跳着看的）。由于我还没有好好的学习过JQuery，但是那些基本的代码还是可以看懂的，所以就想拿现在正在学习的js练一下手，最后还是成功的实现了这个效
html.rar_html放大镜案例
09-21
- `position`属性：放大镜效果通常需要元素相对于其正常位置进行定位，因此CSS中的`position`属性会被设置为`relative`或`absolute`。 - `z-index`属性：为了确保放大镜覆盖在原图之上，`z-index`属性用于设定元素...
js - 放大镜案例
lizixuan2001的博客
12-14 612
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>放.
js放大镜实现（案例）
qq_59599812的博客
09-22 329
话不多说，直接上案例
JS案例之放大镜
X-77
11-08 1375
前言 本票博客主要是放大镜案例，里面涉及到的知识点会提出来，可放心食用~后有源代码。 案例：仿京东放大镜效果 效果见下图： 功能要求： 当鼠标移动到小图片上时，遮罩层出现，同时旁边大图片也出现，鼠标移出，遮罩层消失，大图片也消失。 遮罩层只能在小盒内子移动，不能超出。 遮罩层在小盒子内移动，大图片显示对应的板块。 案例分析： 元素的隐层和显示 遮罩层的移动范围用offset计算 计算出大盒子内移动的距离 案例代码： 首先咱们应该将结...
js实现简单放大镜功能案例
qq_41604155的博客
02-12 320
原理是利用移入移出事件让大图片坐标随着镜子（鼠标）的坐标改变而改变，关键是计算相对应的坐标 代码如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt
Js实现放大镜案例
Harlynn_的博客
10-21 300
Js实现放大镜案例 当鼠标放在图片上时，会在图片上出现遮罩层，同时在图片右面显示遮罩层覆盖处放大的图片，具体效果详见各大购物网站的页面 HTML和CSS代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
js 基础 ---实现放大镜的效果
freesky的专栏
07-19 9131
js 基础 ---实现放大镜的效果 能利用原生的js是非常重要的，所以对于仿照电商的商品放大图做出了这个放大镜 的效果。在这个例子中，放大镜跟随着鼠标的移动而移动，大盒的图片移动方向与小盒子图片的移动方向是相反的，它们的放缩比例是相同的,具体的实现案例如下： 第一种方法： 放大镜效果 body{position: relative;} *{ma
JS实现放大镜案例
weixin_42943920的博客
01-02 535
放大镜案例 实现效果如下图所示： 第一步：结构分析 结构分析 1-一个大盒子 div.box 2-一个放中等图片的盒子 div.middleBox 一张中等图片 一个遮罩层 div.shade 3-一个放小图片的盒子 div.smallBox 两张小图片 4-一个放大图的盒子div.bigBox 结构代码： <div class="box"> <div class="middleBox"> <img src="../img/middle1.jpg" alt
el-image标签中怎么添加放大镜效果
05-20
要在el-image标签中添加放大镜效果，可以使用Vue.js的插件vue-image-magnifier。该插件提供了一个名为VueImageMagnifier的组件，可以轻松地在el-image标签中使用。 首先，在你的Vue.js项目中安装vue-image-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值