js 实现的页面图片放大器以及 event中的诸多 x
背景：
淘宝、天猫等电商网站浏览图片时可以查看大图的功能；
思路：
思路很简单，两张图片，一张较小渲染在页面上，一张较大是细节图，随鼠标事件调整它的 left & top;
需要的知识点:
- onmouseover
- onmouseout
- onmouseenter
- js event对象中的各类坐标
源码：
// index.html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style.css">
<title>放大镜</title>
</head>
<body>
<div id="container">
<div id="small-box">
<!-- #mark 防止用户点击并拖动图片加的一个遮罩层 -->
<div id="mark"></div>
<div id="float-box"></div>
<img src="./img/small.jpg" alt="">
</div> <div id="big-box">
<img src="./img/big.jpg" alt="">
</div>
</div> <script src="./js/render.js"></script>
</body>
</html>
// style.css
* {
margin: 0;
padding: 0;
}
#container {
display: block;
/* 图片宽高 */
width: 450px;
height: 450px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#small-box {
position: relative;
z-index: 1;
}
#float-box {
display: none;
width: 200px;
height: 150px;
position: absolute;
background-color: #ffc;
border: 1px solid #ccc;
filter: alpha(opacity = 50); /* 兼容 ie 写法*/
opacity: 0.5;
}
#mark {
position: absolute;
display: block;
/* 图片宽高 */
width: 450px;
height: 450px;
background-color: #fff;
filter: alpha(opacity = 0);
opacity: 0;
z-index: 10;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 460px;
/* 此处宽高比例同 #float-box */
width: 480px;
height: 360px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
}
#big-box img {
position: absolute;
z-index: 5;
}
// render.js
window.onload = function() {
let container = document.querySelector('#container');
let smallBox = document.querySelector('#small-box');
let mark = document.querySelector('#mark');
let floatBox = document.querySelector('#float-box');
let bigBox = document.querySelector('#big-box');
let bigBoxImage = document.querySelectorAll('img')[1];
mark.onmouseover = function() {
floatBox.style.display = 'block';
bigBox.style.display = 'block';
}
mark.onmouseout = function() {
floatBox.style.display = 'none';
bigBox.style.display = 'none';
}
mark.onmousemove = function(e) {
let _event = e || window.event; // 兼容性
// console.log(_event);
// console.log(_event.clientX,container.offsetLeft, smallBox.offsetLeft, floatBox.offsetWidth)
let left = _event.clientX - container.offsetLeft - smallBox.offsetLeft - floatBox.offsetWidth / 2;
let top = _event.clientY - container.offsetTop - smallBox.offsetTop - floatBox.offsetHeight / 2;
// 处理边界
if (left < 0) {
left = 0;
} else if (left > (mark.offsetWidth - floatBox.offsetWidth)) {
left = mark.offsetWidth - floatBox.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top > (mark.offsetHeight - floatBox.offsetHeight)) {
top = mark.offsetHeight - floatBox.offsetHeight;
}
floatBox.style.left = left + 'px';
floatBox.style.top = top + 'px';
// 求百分比
let percentX = left / (mark.offsetWidth - floatBox.offsetWidth);
let percentY = top / (mark.offsetHeight - floatBox.offsetHeight);
//方向相反，小图片鼠标移动方向与大图片相反，故而是负值
bigBoxImage.style.left = - percentX * (bigBoxImage.offsetWidth - bigBox.offsetWidth) + "px";
bigBoxImage.style.top = - percentY * (bigBoxImage.offsetHeight - bigBox.offsetHeight) + "px";
}
}
event 中的各类坐标：
需要注意：
offsetLeft 获取的是相对于父对象的左边距；left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距；
- offsetLeft返回的数值，而style.left则返回的是字符串；
- offsetLeft是只读的，style.left可读写的；
- style.left的值需要事先定义，否则取到的值为空，而且必须要定义在html里，如果写在样式里面，是取不出它的值的；
这是这个代码的要点之一，另外一个就是去要计算其比例。根据对应比例，进行代码的显示。
另外，小图片和大图片的显示，移动方向是相反的，所以比例前面会乘以一个负号。这个需要注意。
js 实现的页面图片放大器以及 event中的诸多 x的更多相关文章
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- 利用zepto.js实现移动页面图片全屏滑动
HTML <%-- Created by IntelliJ IDEA. User: fanso2o Date: 2017/2/28 Time: 16:09 To change this temp ...
- JS自动缩放页面图片
/** * 缩略图 * * @param bool isScaling 是否缩放 * @param int width 宽度 * @param int height 高度 * @param strin ...
- JS实现点击图片，在浏览器中查看。
工作中遇到要实现点击图片查看的功能,从网上找了一段js代码,可以用. <img src="/pic/${pictureCertificate}" alt="凭证&q ...
- 在页面跳转的时候，在跳转后的页面中使用js 获取到 页面跳转的url中携带的参数。
common.js代码 //获取URL中的参数..等等function getQueryString(name){var reg = new RegExp("(^|&)"+ ...
- JSP中如何利用JS实现登录页面的跳转(JSP中如何利用JS实现跳转页面)
<%! <% url = word = } ...
- 【js】【图片显示】js控制html页面显示图片方式
js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...
- js实现移动端图片预览：手势缩放， 手势拖动，双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
随机推荐
- Laravel5中通过SimpleQrCode扩展包生成二维码实例
Simple Qrcode是基于强大的Bacon/BaconQrCode库开发的针对Laravel框架的封装版本,用于在Laravel中为生成二维码提供接口. 安装SimpleQrCode扩展包 在项 ...
- 快速数论变换(NTT)小结
NTT 在FFT中,我们需要用到复数,复数虽然很神奇,但是它也有自己的局限性--需要用double类型计算,精度太低 那有没有什么东西能够代替复数且解决精度问题呢? 这个东西,叫原根 原根 阶 若\( ...
- Dynamics 365中的常用Associate和Disassociate消息汇总
摘要: 微软动态CRM专家罗勇 ,回复301或者20190123可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 因为编程时候 ...
- 轻量级应用程序Dynamics 365 App for Outlook介绍
摘要: 本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复273或者20180625可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyon ...
- Messenger在MVVM模式中的应用
Messenger在MVVM模式中的应用 Messenger在MVVM中应用的前提 我们知道在MVVM架构中,系统平台的Silverlight客户端界面开发和业务逻辑已经被分开,XAML是SL的主要部 ...
- 从零学习Fluter(五):Flutter中手势滑动拖动已经网络请求
从六号开始搞Flutter,到今天写这篇blog已经过了4天时间,文档初步浏览了一遍,写下了这个demo.demo源码分享在github上,现在对flutter有种说不出的喜欢了.大家一起搞吧! 废话 ...
- Android注解神器 ButterKnife框架
前言: 本人是一个只有几个月工作经验的码小渣.这是我写的第一篇博客,如有不足之处还请大家不要介意,还请大佬可以指出问题. 在这几个月的实战开发中自己也遇到了很多问题,真的是举步艰难啊!!! 在实战开发 ...
- Linux系统下 MySQL 安装 指南（5.7和8.0 版本）
一. 准备工作 1 删除本地centos7中的mariadb: 查看系统中是否已安装 mariadb 服务: rpm -qa | grep mariadb 或 yum list installed | ...
- MongoDB 在系统数据库local上无法创建用户的解决方法
我们知道,MongoDB的Oplog (operations log)记录了用户的最近一段时间的操作(时间长短主要受设置的oplogSize和程序的写入更新量的影响).那么,如果其他部门(例如BI团队 ...
- Powershell-获取命令和帮助
Get-Help 获取命令的帮助文档 Update -Help 更新帮助文档 Save-Help 保存文档 Get-Help Get-VM 加上-Full参数获取详细说明 [-name] <st ...