原生js实现简单的放大镜效果
前言:
相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧;
(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实现简单的放大镜效果的更多相关文章
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- 原生JS实现简单富文本编辑器2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现简单富文本编辑器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用原生js 实现点击消失效果
JQ版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- 原生JS实现简单留言板功能
原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...
- js原生淘宝京东宝贝放大镜效果
js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...
- 原生JS实现幻灯片轮播效果
在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
随机推荐
- JAVA poi设置单元格背景颜色
import java.io.FileOutputStream; import java.io.IOException; import org.apache.poi.ss.usermodel.Ce ...
- webpack e6转化成es5 配置方法
方法一: https://www.babeljs.cn/setup#installation 按照babel官方的配置配 方法二: https://www.jianshu.com/p/ce28cedd ...
- 学习C++的意义
1,常见的观点: 1,并不是每个应届生都有机会写操作系统和驱动程序: 2,嵌入式系统也是软家系统,只不过是软件在出厂的时候已经被烧写到硬件中了,用户没有办法修改软件而已,因此嵌入式系统也是软件系统,C ...
- linux中文件属性
一. linux系统如何管理文件 1.1. 硬盘中的静态文件和inode a. 文件平时都在存放在硬盘中的,硬盘中存储的文件以一种固定的形式存放的,我们叫静态文件. b. 一块硬盘中可以分为两大区域: ...
- 搜索专题: HDU1027Ignatius and the Princess II
Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ( ...
- css3实现颤动的动画
需求 页面要做一个活动入口,不能太显眼,但是又要用户能一眼就看出来. 演示 https://jsfiddle.net/vtsxc18q/ 实现 (部分动画代码) @keyframes chanDong ...
- 深入理解hadoop值MapReduce(2)
1.MapReduce编程模型概述 MapReduce编程模型给出了分布式的编程方法,总共分为5个步骤.分为这5个步骤的优点:组件化和并行化 (1)迭代.遍历输入数据,并将其解析成key/value键 ...
- unittest生成报告
# html报告文件路径 report_abspath = os.path.join(report_path, "result.html") fp = open(rep ...
- Jmeter--逻辑控制之if控制器(转)
一.背景 在实际工作中,当使用Jmeter做性能脚本或者接口脚本时,有可能会遇到需要对不同的条件做不同的操作,基于这种诉求,在Jmeter中可使用if控制器来实现 二.实际操作 逻辑控制器位置: 在线 ...
- React 应用设计之道 - curry 化妙用
使用 React 开发应用,给予了前端工程师无限"组合拼装"快感.但在此基础上,组件如何划分,数据如何流转等应用设计都决定了代码层面的美感和强健性. 同时,在 React 世界里提 ...