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#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
随机推荐
- CentOS下RabbitMq高可用集群环境搭建
准备工作 1,准备两台或多台安装有rabbitmq-server服务的服务器 我这里准备了两台,分别如下: 192.168.40.130 rabbitmq01192.168.40.131 rabbit ...
- 第六课 Html5常用标签 html5学习1
HTML标签的认识一.标签的分类1.双标签 如<html> </html>2.单标签 如<br \> 换行标签 二.标签的关系1.嵌套关系 如<head> ...
- css中关于table的相关设置
一.设置好看的单边框表格 1.一种实现方式 分别给table标签和td标签设置不在同一方向的border属性,如下table设置‘左上’边框,td设置‘右下’边框.其他设置方式同样可以实现. tabl ...
- ArcGIS JavaScriptAPI----- 缓冲区操作
描述 使用ArcGIS Server 几何服务(geometry service)来对绘制在地图上的图形生成缓冲区.几何服务能够在基于浏览器的应用程序中执行缓冲操作(buffering),投影要素(p ...
- android如何获取SHA1
某些Google Play服务(例如Google登录和App Invites)要求我们提供签名证书的SHA-1,以便google paly为我们的应用创建OAuth2客户端和API密钥. 那么如何获取 ...
- AS使用自带虚拟机报错解决
Android studio自带的Google虚拟机越来越好用了,所以可以打开这个功能,想用的时候打开使用即可 使用的过程中经常会遇到这样的问题: 19:26 Emulator: emulator: ...
- Android 使用Picasso加载网络图片等比例缩放
在做android图片加载的时候,由于手机屏幕受限,很多大图加载过来的时候,我们要求等比例缩放,比如按照固定的宽度,等比例缩放高度,使得图片的尺寸比例得到相应的缩放,但图片没有变形.显然按照andro ...
- Windows Server 2012 NIC Teaming 网卡绑定介绍及注意事项
Windows Server 2012 NIC Teaming 网卡绑定介绍及注意事项 转载自:http://www.it165.net/os/html/201303/4799.html Window ...
- MySQL如何判别InnoDB表是独立表空间还是共享表空间
InnoDB采用按表空间(tablespace)的方式进行存储数据, 默认配置情况下会有一个初始大小为10MB, 名字为ibdata1的文件, 该文件就是默认的表空间文件(tablespce file ...
- selenium-配置文件定位元素（九）
原文链接:https://mp.weixin.qq.com/s?__biz=MzU5NTgyMTE3Mg==&mid=2247483802&idx=1&sn=3218e34b6 ...