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

(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. [Web 前端] 024 js 的定时器及函数

    1. Javascript 定时器 1.1 计时事件 设定一个间隔,时间到了后准时执行代码,此为"计时事件" 1.2 作用 1.制作动画 2.异步操作 1.3 定时器的类型及语法 ...

  2. IF条件控制

    条件控制 定义 Python 条件语句是通过一条或多条语句的执行结果(True 或者 False)来决定执行的代码块. 如下图所示 IF语句 if condition_1: statement_blo ...

  3. 小白用Mac

    老话说的好,“最近老板发我一个Mac,但是不会用,嘎嘎嘎嘎” 1.安装软件 安装 Homebrew Homebrew:使用 Homebrew 安装 Apple 没有预装但 你需要的东西,尤其是非界面管 ...

  4. Python实现批量执行华为交换机脚本

    #!/usr/bin/python3 # -*- coding:utf-8 -*- import paramiko import time ssh = paramiko.SSHClient() key ...

  5. Java数据结构之栈(Stack)

    1.栈(Stack)的介绍 栈是一个先入后出(FILO:First In Last Out)的有序列表. 栈(Stack)是限制线性表中元素的插入和删除只能在同一端进行的一种特殊线性表. 允许插入和删 ...

  6. 程序员听到bug后的N种反应…

    程序员的世界里, 不止有代码, 还有bug,bug,bug- 当出现bug时, 程序员们的反应是怎样的呢? 作者:苏小喵,来源:小花小画(微信号:hua-little) - END - 推荐阅读: 1 ...

  7. 逆向工程 生成mapper 接口的 重要方法

    @Test public void testSelectByExample() { ItemsExample itemsExample = new ItemsExample(); ItemsExamp ...

  8. 洛谷 P1541 乌龟棋 & [NOIP2010提高组](dp)

    传送门 解题思路 一道裸的dp. 用dp[i][j][k][kk]表示用i个1步,j个2步,k个3步,kk个4步所获得的最大价值,然后状态转移方程就要分情况讨论了(详见代码) 然后就是一开始统计一下几 ...

  9. linux查看端口是否被占用

    1.使用lsof lsof -i:端口号查看某个端口是否被占用 2.使用netstat 使用netstat -anp|grep 80

  10. 您的浏览器没有获得Java Virtual Machine(JVM)支持。可能由于没有安装JVM或者已安装但是没有启用。请安装JVM1.5或者以上版本,如果已安装则启用它。

    您的浏览器没有获得Java Virtual Machine(JVM)支持.可能由于没有安装JVM或者已安装但是没有启用.请安装JVM1.5或者以上版本,如果已安装则启用它. https://www.j ...