下方的代码包括html,css,javascript。可直接复制到本地文件测试。如果引用的图片无法访问，请替换图片连接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片拖拽与缩放</title>
<style>
#content{
}
</style>
</head>
<body>
<div id="content">
China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br> <br>
China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br> <br>
China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br> <br>
China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br> <br>
<img class="imgs" src="https://img0.baidu.com/it/u=580921286,1214064928&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"><br> <br>
China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br> <br>
China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br> <br>
China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br> <br>
China's latest emphasis on nurturing new quality productive forces as well as the <br>efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br> <br>
<img class="imgs" src="https://img1.baidu.com/it/u=403163518,2135282784&fm=253&fmt=auto&app=138&f=JPEG?w=913&h=393"><br> <br>
China's latest emphasis on nurturing new quality productive forces as well as<br> the efficient policies introduced during the annual sessi<br>ons of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br> <br>
China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br> <br>
China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br> <br>
China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>
</div>
</body>
<!-- <script src="./daz.js"></script> -->
<script>
function createCurtain(){
const curtain = document.createElement('div');
curtain.style.top = "0px";
curtain.style.left = "0px";
curtain.style.position = "fixed";
curtain.style.backgroundColor = "rgba(255, 255, 255, 0)";
curtain.style.width = "100%";
curtain.style.height = "100%";
curtain.style.display = "none";
curtain.style.transition = "background-color 0.4s ease";
// 获取 <body> 元素
const body = document.body;
// 获取第一个子元素
const firstChild = body.firstChild;
// 在第一个子元素之前插入新的 <div> 元素
body.insertBefore(curtain, firstChild);
return curtain;
}
function dragAndZoom(content){
var topOld = 0;
var leftOld = 0;
var width = 0;
var height = 0;
let curtain = createCurtain();
let imgs = content.getElementsByTagName("img");
for(var i=0;i<imgs.length;i++){
imgs[i].onclick=function () {
curtain.style.display="block";
curtain.style.transition="background-color 0.4s ease";
curtain.style.backgroundColor="rgba(0, 0, 0,0.9)";
width = this.offsetWidth;
height = this.offsetHeight;
const myimage = document.createElement('img');
myimage.height = this.offsetHeight;
myimage.style.position = "fixed";
myimage.style.zIndex = "2147483648";
myimage.style.cursor = "grab";
myimage.style.transitionProperty = "top, left, transform";
myimage.style.transitionDuration = "0.4s";
myimage.style.transform = "translate(0%,0%)";
myimage.style.transitionTimingFunction = "ease-in-out;"
myimage.setAttribute('draggable', 'true');
myimage.id = "image";
myimage.setAttribute("src",this.getAttribute("src"));
document.body.style.overflow='hidden';
curtain.appendChild(myimage);
const rect = this.getBoundingClientRect();
const topOffset = rect.top;
const leftOffset = rect.left;
topOld = topOffset;
leftOld = leftOffset;
myimage.style.top=topOffset+"px";
myimage.style.left=leftOffset+"px";
zoom(myimage)
imgMove(myimage);
myimage.style.top = "50%";
myimage.style.left = "50%";
myimage.style.transform = "translate(-50%,-50%)";
}
}
curtain.onclick=function () {
let image = document.getElementById("image");
image.style.transitionProperty = "top, left, transform, height";
image.style.transitionDuration = "0.4s";
image.style.transitionTimingFunction = "ease-in-out;"
image.height = height;
image.style.transform = "translate(0%,0%)";
image.style.top = topOld+"px";
image.style.left = leftOld+"px";
curtain.style.backgroundColor="rgba(255, 255, 255,0)";
image.addEventListener('transitionend', ()=>{
this.style.display="none";
document.body.style.overflow=''
curtain.innerHTML = '';
})
}
}
function imgMove(img) {
const i = window.getComputedStyle(img);
i.getPropertyValue('top');
let tv = 0;
let lv = 0;
// 图片坐标信息
let imgTop = 0;
let imgLeft = 0;
// 鼠标坐标信息
let mx = 0;
let my = 0;
// 图片拖动开始前
img.ondragstart = e => {
img.style.transitionProperty = "";
img.style.transitionDuration = "";
img.style.transitionTimingFunction = ""
// 初始化鼠标坐标信息
mx = e.screenX;
my = e.screenY;
if (img.style.top === "50%") {
// 初始化 图片坐标信息
const imageStyles = window.getComputedStyle(img);
tv = parseFloat(imageStyles.getPropertyValue('top'));
lv = parseFloat(imageStyles.getPropertyValue('left'));
}
}
// 图片拖动中
img.ondrag = e => {
if (e.screenY == 0 && e.screenX == 0) {
return
}
imgTop = imgTop + e.screenY - my;
imgLeft = imgLeft + e.screenX - mx;
mx = e.screenX;
my = e.screenY;
img.style.top = imgTop+tv + "px";
img.style.left = imgLeft+lv + "px";
}
}
function zoom(myimage){
var scrollFunc = function (e) {
e = e || window.event;
let height = myimage.height;
if (e.wheelDelta) { //IE Chrome Opera Safari
if (e.wheelDelta > 0) {
myimage.height = height + 20;
e.stopPropagation(); //终止事件的进一步传播
}
if (e.wheelDelta < 0) {
if(height < 100){
return;
}
myimage.height = height - 20;
e.stopPropagation();
}
} else if (e.detail) { //Firefox
if (e.detail < 0) {
myimage.height = height + 20;
e.stopPropagation(); //终止事件的进一步传播
}
if (e.detail > 0) {
if(height < 100){
return;
}
myimage.height = height - 20;
e.stopPropagation();
}
}
}
if (myimage.addEventListener) {
//addEventListener适用于版本较新的IE浏览器 ，如IE9以及火狐浏览器，
myimage.addEventListener("mousewheel", scrollFunc, false);
// Firefox浏览器使用的滚轮事件是 DOMMouseScroll
myimage.addEventListener("DOMMouseScroll", scrollFunc, false);
} else {
myimage.attachEvent("onmousewheel", scrollFunc);
}
}
</script>
<script>
window.onload = function(){
let content = document.getElementById("content");
dragAndZoom(content);
}
</script>
</html>