我们都知道放大镜效果一般都是用于一些商城中的，列如每当我们打开淘宝，天猫等pc端时，看到心仪的物品时，点击图片时，便呈现出放大镜的效果。在没有去理解分析它的原理时，感觉非常的神奇，当真正地去接触，也是非常好理解、在之前的文章我们也为大家介绍了JavaScript实现放大镜的实例，今天我们带大家介绍下JavaScript仿淘宝实现放大镜效果的实例！

我们将整个布局分三个部分，第一部分为主题的小图片，将他放在整个布局的左上角；第二部分是下边的图片列表，直接跟在小图片的下边；最后一部分是放大镜显示部分，将其定位到小图片的右边。
然后就是利用js添加基本事件（包括鼠标的移入移出等）详细的内用见如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{
            list-style: none;
            padding: 0;
        }
        .zoom-box{
            width: 452px;
            position: relative;
        }
        .small-box{
            position: relative;
            border: 1px solid #ccc;
        }
        .small-box img{
            width: 100%;
            height: 100%;
        }
        .small-box .square{
            position: absolute;
            left: 0;
            top: 0;
            background: yellow;
            opacity: 0.5;
            /*display: none;*/
        }
        .small-box .mask{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .img-list ul::after{
            clear: both;
            content: '';
            display: table;
        }
        .img-list ul li{
            float: left;
            margin: 0 10px;
            padding: 6px;
        }
        .img-list img{
            border: 2px solid transparent;
        }
        .img-list img.active{
            border: 2px solid red;
        }
        .big-box{
            position: absolute;
            top: 0;
            left: 100%;
            margin-left: 2px;
            border: 1px solid #cccccc;
            width: 500px;
            height: 500px;
            overflow: hidden;
            display: none;
        }
        .big-box img{
            position: absolute;
            top: 0;
            left: 0;
        }
 
    </style>
</head>
<body>
    <!-- 布局-->
    <div><!-- 容器-->
        <div><!-- 小图片容器-->
            <img src="../img/magnifier/m1.jpg" alt=""/>
            <div></div><!-- 鼠标选中框-->
            <div></div><!-- 鼠标悬浮位置-->
        </div>
        <div><!-- 图片列表-->
            <ul>
                <li><img src="../img/magnifier/s1.jpg" alt="" data-small="../img/magnifier/m1.jpg"
                         data-big="../img/magnifier/b1.jpg"/></li>
                <li><img src="../img/magnifier/s2.jpg" alt="" data-small="../img/magnifier/m2.jpg"
                         data-big="../img/magnifier/b2.jpg"/></li>
                <li><img src="../img/magnifier/s3.jpg" alt="" data-small="../img/magnifier/m3.jpg"
                         data-big="../img/magnifier/b3.jpg"/></li>
                <li><img src="../img/magnifier/s4.jpg" alt="" data-small="../img/magnifier/m4.jpg"
                         data-big="../img/magnifier/b4.jpg"/></li>
                <li><img src="../img/magnifier/s5.jpg" alt="" data-small="../img/magnifier/m5.jpg"
                         data-big="../img/magnifier/b5.jpg"/></li>
            </ul>
        </div>
        <div><!-- 放大镜-->
            <img src="../img/magnifier/b1.jpg" alt=""/>
        </div>
    </div>
 
    <script>
        //获取要操作的元素
        var smallbox = $('.small-box .mask');
        var smallimg = $('.small-box img');
        var square = $('.square');
        var bigbox = $('.big-box');
        var bigimg = $('.big-box img');
        var imgs = $all('.img-list img');
 
        //鼠标经过图片列表显示被选中，实现图片切换
        for(var i = 0; i < imgs.length; i++){
            imgs[i].onmouseover = function(){
                for(var j = 0; j < imgs.length; j++){
                    imgs[j].className = '';
                }
                this.className = 'active';
 
                //改变对应的图片链接
                smallimg.src = this.getAttribute('data-small');
                bigimg.src = this.getAttribute('data-big');
            };
        }
 
        //鼠标移入放大器显示并设置选中框的大小
        smallbox.onmouseover = function(){
            square.style.display = 'block';
            bigbox.style.display = 'block';
            //位置w/smallimg.w = bigbox.w/bigimg.w
            square.style.width = bigbox.offsetWidth * smallimg.offsetWidth/bigimg.offsetWidth + 'px';
            square.style.height = bigbox.offsetHeight * smallimg.offsetHeight/bigimg.offsetHeight + 'px';
        };
        //鼠标移出放大器隐藏
        smallbox.onmouseout = function(){
            square.style.display = 'none';
            bigbox.style.display = 'none';
        };
 
        //放大器移动
        //获取鼠标的位置
        smallbox.onmousemove = function(ev){
            var oEvent = ev || event;
            var x = oEvent.offsetX - square.offsetWidth/2;
            var y = oEvent.offsetY - square.offsetHeight/2;
 
            if(x < 0){
                x = 0;
            }
            if(x > smallbox.offsetWidth - square.offsetWidth){
                x = smallbox.offsetWidth - square.offsetWidth;
            }
            if(y < 0){
                y = 0;
            }
            if(y > smallbox.offsetHeight - square.offsetHeight){
                y = smallbox.offsetHeight - square.offsetHeight;
            }
 
            //给选中框定位
            square.style.left = x + 'px';
            square.style.top = y + 'px';
 
            //给放大器定位  x/? = smallimg.w/bigimg.w
            bigimg.style.top = -y * bigimg.offsetWidth/smallimg.offsetWidth + 'px';
            bigimg.style.left = -x * bigimg.offsetHeight/smallimg.offsetHeight + 'px';
 
        };
 
        //通过名称查找某个元素
        function $(name){
            return document.querySelector(name);
        }
        //通过名称查找相同的一组数据
        function $all(name){
            return document.querySelectorAll(name);
        }
    </script>
</body>
</html>

总结：

JavaScript仿淘宝实现放大镜效果的实例的更多相关文章

  1. canvas+javascript实现淘宝商品放大镜效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  3. 淘宝商品放大镜效果-JavaScript

    效果图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  5. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  6. Android仿淘宝继续上拉进入商品详情页的效果，使用双Fragment动画切换；

    仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...

  7. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  8. 【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 仿淘宝头像上传功能（三）——兼容 IE6 浏览器。

    前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...

随机推荐

  1. Java中的String、StringBuffer、StringBuilder区别以及Java之StringUtils的用法

    1.String.StringBuffer.StringBuilder的区别 String是Java中基础类型,是immutable类(不可变)的典型实现,利用string进行拼接是会产生过多无用对象 ...

  2. hive中为分区表增加字段需要注意默认不会修改已有分区的字段，导致查询时新增字段为null

    若向hive表添加字段,通常会使用下面这种语句 alter table default.testparquet add columns(c8 string); 但是对于分区表来说, 1. 若新建的分区 ...

  3. Docker安装RMQ

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11752934.html 进入rabbitmq的docker hub镜像仓库地址:https://hub ...

  4. 使用yum命令报错

    树莓派(Raspberry Pi 3) centos7使用yum命令报错File "/usr/bin/yum", line 30 except KeyboardInterrupt, ...

  5. mysql 查询所有子节点

    SELECT t3.college_code FROM ( SELECT t1.college_code, IF ( find_in_set( t1.parent_org_code, , ) AS i ...

  6. sublime text 3 快捷操作

    快捷键:1.通用 ↑↓← → 上下左右移动光标 Alt 调出菜单 Ctrl + Shift + P 调出命令板(Command Palette) Ctrl + ` 调出控制台 2.编辑 Ctrl + ...

  7. 4412 SPI驱动

    1.Linux主机驱动和外设驱动分离思想(I2C驱动里有) SPI驱动总线架构:SPI核心层(x),SPI控制器驱动层(x),SPI设备驱动层(√).前面两个设备驱动搞明白了可以去看 2.教程中介绍: ...

  8. 2018-2019 2 20165203 《网络对抗技术》Exp8 Web基础

    2018-2019 2 20165203 <网络对抗技术>Exp8 Web基础 实验要求 1.本实践的具体要求有: (1) Web前端HTML(0.5分) 能正常安装.启停Apache.理 ...

  9. Oralce-PL/SQL编程-游标

    PL/SQL(Procedural Language/SQL)是Oracle在数据库中引入的一种过程化编程语言. PL/SQL块结构 声明部分 执行部分(必须的) 异常处理部分 [declare] - ...

  10. python Condition类（锁）

    Condition(条件变量)通常与一个锁关联.需要在多个Contidion中共享一个锁时,可以传递一个Lock/RLock实例给构造方法,否则它将自己生成一个RLock实例. 不理解锁的,请看上一条 ...