我们都知道放大镜效果一般都是用于一些商城中的，列如每当我们打开淘宝，天猫等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. List接口和Set接口及其常用实现类概述

    一.List接口 List:有序的 collection(也称为序列).此接口的用户可以对列表中每个元素的插入位置进行精确地控制.用户可以根据元素的整数索引(在列表中的位置)访问元素,并搜索列表中的元 ...

  2. centos6.5 相关命令

    挂载U盘 1.进入mnt目录: #cd /mnt 2.新建一个USB目录: #mkdir usb 3.查看U盘的目录: #fdisk –l 4.挂载: #mount –t vfat /dev/sdb1 ...

  3. C# 批量修改考勤设备时间

    自己工作中用到的小程序,每次远行后批量改一次 如下: 其中的zkemkeeper是中控的相关组件,因是系统组件,须要先注册相关文件后才有效 using System; using System.Col ...

  4. 分组函数 partition by 的详解，与order by 区别

    partition  by关键字是分析性函数的一部分,它和聚合函数(如group by)不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录, partition  by ...

  5. postgre存储过程或者视图中"::"双冒号是什么意思

    双冒号是类型转换的意思. 比如: '2019-09-10'::date

  6. Halo（六）

    Spring publish-event 机制 监听者模式包含了一个监听者 Listener 与之对应的事件 Event,还有一个事件发布者 EventPublish. 过程就是 EventPubli ...

  7. 关于iphone设置显示模式为标准模式和放大模式时的区别

    参考来自:https://www.jianshu.com/p/5f61d914114b CGFloat scale = [[UIScreen mainScreen] scale]; CGFloat n ...

  8. C#中的6种常见的集合

    1.动态数组(ArrayList) 动态数组(ArrayList)代表了可被单独索引的对象的有序集合.它基本上可以替代一个数组.但是,与数组不同的是,您可以使用索引在指定的位置添加和移除项目,动态数组 ...

  9. nodejs 程序(有的功能和前端js是不一样的)

    node文档:http://nodejs.cn/api/ 1.控制台输出 (node的输出是在命令框中输出的): 有颜色的输出 :console.log('\x1B[33m%s\x1b[0m:', p ...

  10. [CSP-S模拟测试]:reverse（模拟）

    题目传送门(内部题56) 输入格式 第一行包含一个整数:$T$,表示数据组数.接下来$T$行,每行包含两个字符串:$a\ b$. 输出格式 对于每组数据,如果存在$c$,输出最长的情况下字典序最大的$ ...