js实现放大镜效果(图片放大)—JavaScript
今天来做一个非常常见且有意思的的案例,就是我们的鼠标经过图片放大的一个效果!
具体实现的效果看下面这张图
案例分析:
黄色的遮挡层跟随鼠标功能。
把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。
首先是获得鼠标在盒子的坐标。
之后把数值给遮挡层做为left 和top值。
此时用到鼠标移动事件,但是还是在小图片盒子内移动。
发现,遮挡层位置不对,需要再减去盒子自身高度和宽度的一半。
遮挡层不能超出小图片盒子范围。
如果小于零,就把坐标设置为0
如果大于遮挡层最大的移动距离,就把坐标设置为最大的移动距离
遮挡层的最大移动距离:小图片盒子宽度 减去 遮挡层盒子宽度
这种类似放大镜的效果很多朋友肯定以为是一张图片的放大效果,其实我们这个地方是准备了两张图片,鼠标经过小图移动大图,这种神奇的效果就实现了。接下来我们仔细来分析一下这个效果该怎么写代码!
首先还是老规矩哈,在 body 里面把 html 框架搭好,引入两张图片。
<div class="box"><img src="data:images/small.jpg" alt="" class="small"><div class="yy"></div><div class="big"><img src="data:images/big.jpg" alt=""></div></div>
这样写好了我们看不出任何效果,当然需要 css 的渲染!!!
<style>.box {position: relative;width: 350px;height: 350px;}.yy {position: absolute;top: 0;left: 0;width: 250px;height: 250px;background-color: yellow;opacity: 0.5;border: 1px solid #333;display: none;}.big {position: absolute;left: 360px;top: 0px;width: 500px;height: 500px;overflow: hidden;display: none;}.big>img {position: absolute;top: 0;left: 0;}</style>
为了展示效果我在隐藏之前截了个图,基本框架搭好以后就是这个样子啦!当然,为了更好的实现效果,这里的大图和黄色遮挡层肯定是要隐藏的,我放在上面的代码已经提前写好了隐藏。
接下肯定就是用 JavaScript 来实现的页面交互效果了。鼠标经过隐藏,鼠标离开显示,以及鼠标在小图里面移动大图跟着移动的效果。这样就实现了一个放大镜的效果!!
<script>window.addEventListener('load', function () {var box = document.querySelector('.box');var yy = document.querySelector('.yy');var big = document.querySelector('.big');box.addEventListener('mouseover', function () {yy.style.display = 'block';big.style.display = 'block';})box.addEventListener('mouseout', function () {yy.style.display = 'none';big.style.display = 'none';})box.addEventListener('mousemove', function (e) {var x = e.pageX - box.offsetLeft;var y = e.pageY - box.offsetTop;var width = x - yy.offsetWidth / 2;var height = y - yy.offsetHeight / 2;if (width <= 0) {width = 0;} else if (width >= box.offsetWidth - yy.offsetWidth) {width = 100;}if (height <= 0) {height = 0;} else if (height >= box.offsetHeight - yy.offsetHeight) {height = box.offsetHeight - yy.offsetHeight;}yy.style.left = width + 'px';yy.style.top = height + 'px';var bigimg = document.querySelector('.big>img');// 大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离var bigx = width * (bigimg.offsetWidth - big.offsetWidth) / (box.offsetWidth - yy.offsetWidth);var bigy = height * (bigimg.offsetHeight - big.offsetHeight) / (box.offsetHeight - yy.offsetHeight);bigimg.style.left = -bigx + 'px';bigimg.style.top = -bigy + 'px';})})</script>
以上就是实现这一效果的全部代码了,感兴趣的朋友可以收藏哦,以后可就找不到这么优秀的文章了!!
js实现放大镜效果(图片放大)—JavaScript相关推荐
- js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片 近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观 存在两个问题 1.点击查看后,电子照片会变形 ...
- 原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录 效果图 设计思路 基本架子 蒙版 放大效果图 逻辑设计 蒙版跟放大的图肯定要先隐藏 鼠标移入图片显示蒙版 鼠标移动蒙版跟着移动 处理边界情况 大图移动 小优 ...
- js放大镜(图片放大)
js图片放大 1.结构部分 <div class="box" id="box"><div class="small"> ...
- uniapp点击图片放大_想要放大镜将图片放大的效果?你只需这么做即可!
[每天楞一点]的第 46 个知识 效果图: 在PicsArt中打开图片,点击[工具]--[图形剪辑]. 选择圆形,通过缩放双指,将其大小调整至合适. 完事后,点击右上角的箭头. 将边框颜色设置为黑色, ...
- 使用js实现放大镜效果
点击预览放大镜效果,图片比较大,因为需要精细的图片去凸显放大的效果,请耐心 可以通过滑轮控制放大倍数,由于图片太大 如果放大镜没有出现 可刷新一下网页 转载于:https://www.cnblogs. ...
- 用JS写出JS事件中京东图片放大特效
图片放大特效 准备两张相同的图片,小图和大图. 小图显示在商品的展示区域. 大图用于鼠标在小图上移动时,按比例的显示大图中的对应区域. 编写HTML页面,展示小图.隐藏鼠标的遮罩及大图. 当鼠标在小图 ...
- js实现鼠标悬浮图片放大预览
先上效果图: 鼠标悬浮直接大图浮现! 首先css代码: .big {overflow: hidden;display: none;position: absolute;top: 100px;left: ...
- html js 图片放大效果,JavaScript实现图片放大预览效果
代码实现: Document .preview-img { position: relative; height: 398px; } .mask { display: none; position: ...
- 原生js代码实现图片放大境效果
hello 大家好! 这是我的第一篇博客文章,感谢大家前来阅读,希望我们都能在这个平台上相互交流.共同进步.查漏补缺. 今天我给大家分享一下自己用js写的一个图片放大器效果,我做了两种效果的放大,其实 ...
最新文章
- Linux下FTP服务器配置与管理
- boost::type_traits模块用法的一些示例
- childNodes详解
- Java语言学习概述
- Java——网络编程(实现基于命令行的多人聊天室)
- layer.open组件获取弹出层页面变量、函数
- AIM Tech Round 5 (rated, Div. 1 + Div. 2)
- 学习 TList 类的实现[1]
- 基于MATLAB的电力系统短路故障分析与仿真
- Django验证码*异步方案Celery之Celery介绍和使用(Celery介绍、创建Celery实例并加载配置、加载Celery配置、定义发送短信任务、启动Celery服务、调用发送短信任务)
- 给计算机老师的元旦祝福,送给老师的元旦祝福语(精选50句)
- 聚沙成塔,浙江形成1000 万千瓦“虚拟电厂”
- php7 yar扩展,php7安装yar扩展的方法详解
- MTK 使用iptable 命令来完成网络路由(android WIFI/4G分享网络)
- linux服务器关机日期,linux服务器last查看关机记录
- Unity3D——AR小游戏
- Python之Sqlitespy连接并把Excel内容写到数据库的表中
- 数据库之考勤管理系统
- 计算机自带输入法在哪里设置方法,电脑上输入法怎么设置默认输入法(教你设置步骤)...
- php amr格式转换,php 微信amr转mp3的方法
热门文章
- windows批处理(cmd/bat脚本)编程详解
- java对外接口 入参实体命名_支付中心接口设计之参数命名
- 修复gnome3下chrome鼠标主题不正确的问题
- c语言52单片机液晶屏显示,[手把手教你学51单片机C语言教程]22 LCD12864液晶屏显示.pdf...
- 计算机 运行新ie 命令,如何使用命令行卸载IE10浏览器?
- 年轻人如何创业(如何创业白手起家)
- STP生成树协议实验
- MSP430驱动诺基亚5110液晶屏完整程序
- 飞猪的第一个双十一,除了21.7亿你还读到了什么?
- 2015下半年软件测评师上午考试试题