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#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
随机推荐
- JavaScript（转载自 计科学院 慕课网）
什么是脚本语言? ①脚本语言介于HTML和C,C++,Java,C#等编程语言之间 ②脚本语言与编程语言有相似地方,其函数与编程语言类似,也有变量.与编程语言之间最大的区别是编程语言的语法和规则更为严 ...
- z-tree 回显所有选中的id
//回显选择的checkbox函数 function treeHxIdFun(obj) { var objTree = $.fn.zTree.init($("#demo"), se ...
- #WEB安全基础 : HTML/CSS | 0x10.1更多表单
来认识更多的表单吧,增加知识面 我只创建了一个index.html帮助你认识它们 以下是代码 <!DOCTYPE html> <html> <head> <m ...
- win10的react native 开发环境搭建，使用Android模拟器
1.打开cmd的管理员模式,win+X,选择命令提示符(管理员)即可,运行如下命令: @"%SystemRoot%\System32\WindowsPowerShell\v1.0\power ...
- Skywalking部署常见问题以及注意事项
Skywalking部署常见问题以及注意事项 Intro SkyWalking 创建与2015年,提供分布式追踪功能.从5.x开始,项目进化为一个完成功能的Application Performanc ...
- Docker 创建 Jira Core(Jira SoftWare) 7.12.3 中文版
目录 目录 1.介绍 1.1.什么是 JIRA Core? 1.2.什么是 JIRA SoftWare 2.JIRA 的官网在哪里? 3.如何下载安装? 4.对 JIRA 进行配置 4.1.JIRA ...
- c# 多线程委托传参方式
1.定义一个线程调用的方法函数 private void RTPServer(object _Serverip) { IPEndPoint Serverip = _Serverip as IPEndP ...
- C# 反射的例子
通过字符串变量访问控件 string t = "textbox1"; TextBox tb = (TextBox)this.GetType().GetField(t, System ...
- Linux PXE无人值守网络装机
Linux PXE无人值守网络装机 一.实验环境: 2台Linux系统(RHEL6.5版本),1台作为:PXE远程安装服务器(安装dhcp服务.ftp服务.tftp服务),另1台作为:客户端(未装RH ...
- 公共的JS组件-告别CURD
urls.py urlpatterns = [ url('^asset.html$', views.AssetView.as_view()), url('^asset-json.html$', vie ...