我们都知道放大镜效果一般都是用于一些商城中的，列如每当我们打开淘宝，天猫等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基础复习（二）

    一. 基本语法 如果一个源文件中什么内容都没有,编译会不会生成 字节码文件?不会 如果一个类中没有主方法(如下图),编译运行会怎么样?编译可以通过,但运行报错 : 没有主方法 主方法 : 是一个特殊的 ...

  2. 网络体系应用层之万维网、http协议

    1.万维网概述 万维网以客户--服务器方式工作,万维网客户程序就是各式各样的浏览器,万维网文档所驻留的主机则运行服务器程序, 因此这个主机也称为万维网服务器.客户程序向服务器程序发出请求,服务器程序向 ...

  3. javascript中new关键字详解

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

  4. 【HDU6621】K-th Closest Distance【线段树】

    题目大意:给你一堆数,每次询问区间[l,r]中离p第k小的|ai-p| 题解:考虑二分答案,对于每个可能的答案,我们只需要看在区间[l,r]里是否有≥k个比二分的答案还要接近于p的 考虑下标线段树,并 ...

  5. [CSP-S模拟测试]:Lighthouse（哈密顿回路+容斥）

    题目背景 $Billions\ of\ lighthouses...stuck\ at\ the\ far\ end\ of\ the\ sky.$ 题目描述 平面有$n$个灯塔,初始时两两之间可以相 ...

  6. 6105 - deauth after EAPOL key exchange sequence

    wifi无法连接公司的网络 Warning Error in Event Log - deauth after EAPOL key exchange sequence https://forums.i ...

  7. codeforces 557E Ann and Half-Palindrome

    题意简述 给定一个字符串(长度不超过5000 且只包含a.b)求满足如下所示的半回文子串中字典序第k大的子串 ti = t|t| - i + 1(|t|为字符串长度)   -------------- ...

  8. spring事务传播行为讲解转载

    https://segmentfault.com/a/1190000013341344 前言 Spring在TransactionDefinition接口中规定了7种类型的事务传播行为.事务传播行为是 ...

  9. delphi在64位系统下写注册表注意事项

    HKEY_LOCAL_MACHINE写这个主键下的项,在64位系统下可能会重定向,所以构造时要加KEY_WOW64_64KEY reg := TRegistry.Create(KEY_WRITE or ...

  10. iview+vue 使用中遇到的问题（表格、select、radio）

    1.iview+vue中,对表头的动态设置: iview表头若是需要动态设置,可以有两个方法,第一种: children: [ { title: '2017年', align: 'center', k ...