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#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
随机推荐
- [HTML/CSS]colum-gap属性
属性定义及使用说明 column-gap的属性指定的列之间的差距. 注意: 如果指定了列之间的距离规则,它会取平均值. 语法 column-gap: length|normal; 值 描述 l ...
- 在虚拟机中搭建qduoj（二）——安装OJ
在上一章中,我们已经做好了准备工作,现在,正式开始搭建OJ. 可以先看看官方文档: https://github.com/QingdaoU/OnlineJudgeDeploy/tree/2.0 运行p ...
- 【代码笔记】Web-CSS-CSS Fonts(字体)
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- SAP MM ME21N 创建PO时报错 - Net price in CNY becomes too large –
SAP MM ME21N 创建PO时报错 - Net price in CNY becomes too large – 笔者所在的项目上,由于客户尚未正式大规模量产,在现阶段,所有的物料基本都是走费用 ...
- 企业信息化-Excel快速生成系统
企业信息化,主要是指对企业生产运营过程所形成的信息数字化,最终形成了数字资产.大型企业为了节约成本,提高协同工作效率,都会定制ERP.办公OA.流程审批等系统做信息化支撑.但是中小企业精力投入到生成中 ...
- Windows7 WIN 7 64位 环境编译6sv2.1版本的大气传输模型
从来没见过Fortran...这次为了添加国产卫星光谱响应的支持,只能从零开始肯了. 6S模型主页:http://6s.ltdri.org/index.html. 下载最新的2015年更新的6SV2. ...
- 让自定义view宽高成比例显示
有时候我们自定义一个View,比如ImageView,我们需要让它宽高按照一定的比例显示,例如在ImageView在GridView中显示,GridView设置了3列,由于ImageVIew的宽度会根 ...
- Android Studio Termanal打不开，提示java.io.IOEXception:couldn't create PTY
打开Andorid Studio,点击Terminal提示错误; 如图: 经过一番挣扎,尝试了以下几种 方法一:打开File -> Settings -> Tools -> Ter ...
- 如何解决夜神模拟器连不上adb的问题
要搞一个安卓的项目.由于电脑系统是年前刚刚重装的,系统里啥都没有,于是临时安装了一下android studio 2.2,然后又装了一个夜神模拟器.工程打开后,编译通过了,于是打开夜神模拟器,想要通过 ...
- .net向文件写入字符串流内存溢出的问题
字符串过大导致抛出异常: exceptopm of type 'system.outOfmemoryexception' was thrown 解决方法:逐块写入可以避免这个问题