前言:
相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧;

(1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成。

html:
<div id="box">
<div id="small"></div>
</div>
<div id="big">
<img src="12.png" id="imgs"/>
</div>

第一部分的原理是:设置box的background为需要放大的图片,同时背景的宽高为100%。再将box的宽高设为300px,这样背景图片就可以撑满box了。然后通过监听box的mousemove事件,控制红色小框块的移动。这个红色小框块就是要放大的地方。

第二部分的原理是:设置big里面的img为box的宽度的3倍(这里的3倍就是放大镜的放大倍数,当然这个值是可以自由选择的。)。同时big块的宽高为350px,用来限制img的显示。然后通过移动img的left,top来达到放大镜的效果。

  css代码:
html,body {
margin: 0;
padding:0;
}
#box{
width: 300px;
height: 300px;
position: relative;
background: url(12.png);
background-size:100% 100%;
}
#box #small{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background: red;
opacity: 0.6;
}
#big{
width: 350px;
height: 350px;
overflow: hidden;
position: relative;
display: none;
}
#big img{
width: 900px;
height: 900px;
position: absolute;
}

(2)js部分:

var box = document.querySelector('#box');
var small = document.querySelector('#small');
var big = document.querySelector('#big');
var img = document.querySelector('#imgs');
//监听box的mousemove事件
box.onmousemove = function(e){
//获取鼠标的x、y坐标。为什么要减去50呢?为了让鼠标刚好在small红色小方块的中心。
var top = e.clientY-50;
var left = e.clientX-50;
//限制small小方块移出box的范围
if(top > 200){top = 200};
if(top < 0){top = 0};
if(left > 200){left = 200};
if(left < 0){left = 0};
//动态设置small小方块的位置,让小方块跟随鼠标移动
small.style.left = left + 'px';
small.style.top = top + 'px';
//让big里面的图片跟随鼠标的移动而移动。这里为什么要乘以(-3)呢?因为big里面的大图是box的3倍。鼠标在box上面向右移动1px,那么big里面的大图就要向左移动(1 x -3)px才能达到我们想要的效果。
img.style.top = top*(-3) + 'px';
img.style.left = left*(-3) + 'px';
}
//监听box的onmouseenter事件
box.onmouseenter = function(e){
//当鼠标进入box范围的时候,显示放大效果
big.style.display='block';
}
//监听box的onmouseleave 事件
box.onmouseleave = function(e){
//当鼠标移出box范围的时候,隐藏放大效果
big.style.display='none';
}

好了,css+js实现放大镜的功能到这里就完成了。很简单吧。不过这只是简单的实现,还有使用canvas实现的方法。

不能只看不动手的喔,自己动手敲一遍,就好理解很多了。

原生js实现简单的放大镜效果的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  3. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 原生JS实现简单富文本编辑器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 使用原生js 实现点击消失效果

    JQ版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  6. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  7. js原生淘宝京东宝贝放大镜效果

    js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...

  8. 原生JS实现幻灯片轮播效果

    在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...

  9. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

随机推荐

  1. JAVA poi设置单元格背景颜色

    import java.io.FileOutputStream; import java.io.IOException;   import org.apache.poi.ss.usermodel.Ce ...

  2. webpack e6转化成es5 配置方法

    方法一: https://www.babeljs.cn/setup#installation 按照babel官方的配置配 方法二: https://www.jianshu.com/p/ce28cedd ...

  3. 学习C++的意义

    1,常见的观点: 1,并不是每个应届生都有机会写操作系统和驱动程序: 2,嵌入式系统也是软家系统,只不过是软件在出厂的时候已经被烧写到硬件中了,用户没有办法修改软件而已,因此嵌入式系统也是软件系统,C ...

  4. linux中文件属性

    一. linux系统如何管理文件 1.1. 硬盘中的静态文件和inode a. 文件平时都在存放在硬盘中的,硬盘中存储的文件以一种固定的形式存放的,我们叫静态文件. b. 一块硬盘中可以分为两大区域: ...

  5. 搜索专题: HDU1027Ignatius and the Princess II

    Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ( ...

  6. css3实现颤动的动画

    需求 页面要做一个活动入口,不能太显眼,但是又要用户能一眼就看出来. 演示 https://jsfiddle.net/vtsxc18q/ 实现 (部分动画代码) @keyframes chanDong ...

  7. 深入理解hadoop值MapReduce(2)

    1.MapReduce编程模型概述 MapReduce编程模型给出了分布式的编程方法,总共分为5个步骤.分为这5个步骤的优点:组件化和并行化 (1)迭代.遍历输入数据,并将其解析成key/value键 ...

  8. unittest生成报告

    # html报告文件路径    report_abspath = os.path.join(report_path, "result.html")    fp = open(rep ...

  9. Jmeter--逻辑控制之if控制器(转)

    一.背景 在实际工作中,当使用Jmeter做性能脚本或者接口脚本时,有可能会遇到需要对不同的条件做不同的操作,基于这种诉求,在Jmeter中可使用if控制器来实现 二.实际操作 逻辑控制器位置: 在线 ...

  10. React 应用设计之道 - curry 化妙用

    使用 React 开发应用,给予了前端工程师无限"组合拼装"快感.但在此基础上,组件如何划分,数据如何流转等应用设计都决定了代码层面的美感和强健性. 同时,在 React 世界里提 ...