HTML：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>放大镜效果</title>

    <link rel="stylesheet" href="index.css">

</head>

<body>

    <div id="box">

        <div id="large-box">

            <img src="data:images/1.jpg" id="large-img">

        </div>

        <div id="middle-box">

            <img src="data:images/1.jpg" id="middle-img">

            <div id="shadow"></div>

        </div>

        <div id="small-box">

            <img src="data:images/1.jpg" class="active">

            <img src="data:images/2.jpg">

            <img src="data:images/3.jpg">

            <img src="data:images/4.jpg">

        </div>

    </div>

    <script src="index.js"></script>

</body>

</html>

　　

 
CSS：
* {

    margin: 0;

    padding: 0;

}

body {

    background: #000;

}

img {

    vertical-align: bottom;

}

#box {

    position: relative;

    margin: 10px;

    padding: 10px;

    width: 260px;

    background: #fff;

}

#large-box {

    display: none;

    position: absolute;

    top: 0;

    left: 290px;

    width: 260px;

    height: 260px;

    overflow: hidden;

}

#large-img {

    position: absolute;

    width: 520px;

    height: 520px;

}

#middle-box {

    position: relative;

}

#middle-img {

    width: 100%;

}

#shadow {

    display: none;

    position: absolute;

    left: 0;

    top: 0;

    width: 130px;

    height: 130px;

    background: rgba(255, 0, 0, .4);

    cursor: move;

}

#small-box {

    margin-top: 10px;

    overflow: hidden;

}

#small-box img{

    float: left;

    width: 63px;

    border: 1px solid #fff;

}

#small-box .active {

    border-color: red;

}

　　

js：
 
 
function $(id) {

    return document.getElementById(id);

}

var oBox         = $('box');

var oSmallBox  = $('small-box');

var aSmallImg  = Array.from(oSmallBox.children);

var oMiddleBox = $('middle-box');

var oMiddleImg = $('middle-img');

console.log(oMiddleImg);

var oLargeBox  = $('large-box');

var oLargeImg  = $('large-img');

var oShadow    = $('shadow');

// 给缩略图添加鼠标进入事件

aSmallImg.forEach( v => {

    v.onmouseover = function () {

        // 先去掉所有的class名

        aSmallImg.forEach(v => v.className = '');

        // 当前img添加class

        this.className = 'active';

        // 改变中型图片的地址

        oMiddleImg.src = this.src;

        // 改变大型图片的地址

        oLargeImg.src = this.src;

    };

});

// 遮罩层最大的left和top值

var maxL = 0;

var maxT = 0;

// 大图片最大的left和top值

var maxLargeImgL  = 0;

var maxLargeImgT  = 0;

// 鼠标进入middle-box

oMiddleBox.onmouseover = function () {

    // 显示遮罩层

    oShadow.style.display = 'block';

    // 显示右侧的盒子

    oLargeBox.style.display = 'block';

    // 获取最大的left和top值

    maxL = oMiddleBox.offsetWidth - oShadow.offsetWidth;

    maxT = oMiddleBox.offsetHeight - oShadow.offsetHeight;

    maxLargeImgL = oLargeImg.offsetWidth - oLargeBox.offsetWidth;

    maxLargeImgT = oLargeImg.offsetHeight - oLargeBox.offsetHeight;

};

// 鼠标离开middle-box

oMiddleBox.onmouseout = function () {

    // 显示遮罩层

    oShadow.style.display = 'none';

    // 显示右侧的盒子

    oLargeBox.style.display = 'none';

};

// 给middle-box添加移动事件

oMiddleBox.onmousemove = function (ev) {

    var e = ev || window.event;

    var iL = e.clientX - oShadow.offsetWidth / 2 - oMiddleBox.offsetLeft - oBox.offsetLeft;

    var iT = e.clientY - oShadow.offsetHeight / 2 - oMiddleBox.offsetTop - oBox.offsetTop;

    // 限定左侧

    if(iL < 0) {

        iL = 0;

    }

    // 限定上侧

    if(iT < 0) {

        iT = 0;

    }

    // 限定右侧

    if(iL > maxL) {

        iL = maxL;

    }

    // 限定下侧

    if(iT > maxT) {

        iT = maxT;

    }

    oShadow.style.left = iL + 'px';

    oShadow.style.top  = iT + 'px';

    // 让大图移动

    oLargeImg.style.left  = - iL * maxLargeImgL / maxL + 'px';

    oLargeImg.style.top   = - iT * maxLargeImgT / maxT + 'px';

};
图片更换成自己的路径即可

js之放大镜效果的更多相关文章

  1. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  2. 使用js实现放大镜效果

    点击预览放大镜效果,图片比较大,因为需要精细的图片去凸显放大的效果,请耐心 可以通过滑轮控制放大倍数,由于图片太大 如果放大镜没有出现 可刷新一下网页

  3. JS实现放大镜效果(放大图片)

    注意:里边的两张图片(一大一小)可以自己添加,JQ采用jquery-1.11.3.js版,也可自行调换. HTML代码: <!DOCTYPE html> <html> < ...

  4. js实现放大镜效果

    原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置: 放大镜的移动方向和大图片的移动方向:横向和纵向都是相反,才可以保证同步: 需要元素:大图和小图,存放大图和小图的容器 ...

  5. jquery+js实现鼠标位移放大镜效果

    jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...

  6. javascript放大镜效果

    JS实现放大镜效果 首先我们先设想一下放大镜效果 1.当鼠标进入小盒子的时候,把大图片显示出来 2.当指定移动区域的时候,显示当前放大区域(放大效果) 3.鼠标移除我们让它消失 一.实现页面布局HTM ...

  7. 用js实现放大镜的效果

    第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容, ...

  8. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  9. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

随机推荐

  1. Java实习二

    链表(java实现) Link.java public class Link{ private Node first; public Link(){ this.first = null; } //判断 ...

  2. codeforces 848c - two TVs

    2017-08-22 15:42:44 writer:pprp 参考:http://blog.csdn.net/qq_37497322/article/details/77463376#comment ...

  3. 通俗易懂讲解IO模型

    前言 说到IO模型,都会牵扯到同步.异步.阻塞.非阻塞这几个词.从词的表面上看,很多人都觉得很容易理解.但是细细一想,却总会发现有点摸不着头脑.自己也曾被这几个词弄的迷迷糊糊的,每次看相关资料弄明白了 ...

  4. 个人待办事项工具的设计和搭建（IFE前端2015春季 任务3）

    这是我几个月之前的项目作品,花了相当的时间去完善.博客人气不高,但拿代码的人不少,所以一直处于保密状态.没有公开代码.但如果对你有帮助,并能提出指导意见的,我将十分感谢. IFE前端2015春季 任务 ...

  5. 谈一谈最近关闭的Kindle人论坛

    最近Kindle圈子内最大的论坛“Kindle人”关闭了,倒也掀起了一阵小波澜.Kindle人论坛是K友圈子里比较著名的一个“Kindle资源分享论坛”,这么一说其实混了这么久网络,大家都知道这个论坛 ...

  6. web微信开发总结

    这两天使用Django开发了web微信,实现了显示联系人以及收发消息的功能. 总结下这过程中使用到的一些知识. 1 http请求 通过chrome浏览器自带的开发者工具查看每次请求的信息,分析请求,包 ...

  7. PowerDesigner中NAME和COMMENT的互相转换

    原文: http://www.cnblogs.com/yelaiju/archive/2013/04/26/3044828.html 由于PDM 的表中 Name 会默认=Code 所以很不方便, 所 ...

  8. HTML子页面保存关闭并刷新父页面

    1.思路是子页面保存后,后台传递成功的js到前台. 2.js的原理是——子页面调用父页面的刷新 子页面 function Refresh() {            window.parent.Re ...

  9. Python实现CSV数据的读取--两种方法实现

    方法一: 方法二:

  10. oracle11g客户端如何完全卸载(转)

    1.停用Oracle服务:进入计算机管理,在服务中,找到oracle开头的所有服务,右击选择停止 2.在开始菜单中,找到Universal Installer,运行Oracle Universal I ...