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#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
随机推荐
- nodejs 搭建简易服务器
www文件夹下 template文件夹下 server.js代码: const express=require('express'); const static=require('express-st ...
- linux学习笔记-配置vbox虚拟机本地连接和外网同时可用
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 在设置网络里面启用两个网卡,一个桥接,一个网络地址转换 archlinux系统下第一个网络地址转换,第二个桥接 centos7系 ...
- HTML和CSS前端教程05-CSS盒模型
目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...
- How to Apply Patches to a WLS 8.1 Environment
APPLIES TO: Oracle Weblogic Server - Version 8.1 to 8.1Information in this document applies to any p ...
- LayoutInflater.inflate()方法两个参数和三个参数
转载请标明出处:https://www.cnblogs.com/tangZH/p/7074853.html 很多人都用过LayoutInflater(布局填充器) 对于我来说通常使用下面两种:Lay ...
- 原生Js交互之DSBridge
文章链接:https://mp.weixin.qq.com/s/Iqd0dKM-ZW4UwkIgSTnvYg 在上一篇文章「android 记一次富文本加载之路」中 介绍了关于android加载富文本 ...
- C语言使用HZK16显示每个像素的代码
下边内容段是关于C语言使用HZK16显示每个像素的内容. #include<stdio.h>#include<stdlib.h>void main(){ int i,j; ch ...
- 通过fromdata实现上传文件
其实呢,文件上传的插件很多,可是现在做的东西要求尽量少用插件,所以就自己写了一下. 之前也用node写过对文件处理方面的东西,这次用php写着试一下. a.html文件 <!DOCTYPE ht ...
- 接入渠道SDK时出现乙方SDK回调不起作用
使用activity.runOnUiThread(new Runnable() {} 方法去解决
- HDFS副本放置策略
1.第一个副本放置在上传文件的DataNode上,如果是集群外提交,则随机挑选一个磁盘不太满,CPU不太忙的节点. 2.第二个副本放置在与第一个副本不同的机架上. 3.第三个副本放置在与第二个副本同机 ...