<script>
document.add
EventListener('DOMContentLoaded', (
event) => {
const images = document.querySelectorAll('img');
images.forEach((image) => {
image.add
EventListener('click', (
event) => {
var original_image = document.getElementById("new_image");
if (image.alt != 'no'){
reset_image();
original_image.src = image.src;
document.getElementById('image-background').style.cssText='display:block;display: flex;';
}
});
});
});
</script>
<style>
#image-background{
top: 0px;
left: 0px;
width: 100%;
z-index: 95;
height: 100%;
display: none;
height: 100vh;
position: fixed;
overflow: hidden;
align-items: center;
justify-content: center;
background-color: rgba(0,0,0,0.
75);
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
#image-background img {
cursor: grab;
max-width: 100%;
max-height: 100%;
border-radius:
8px;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
#image-background button {
border: none;
color: black;
font-size: 1
6px;
margin: 4px 2px;
cursor: pointer;
font-size: 1
8px;
overflow: hidden;
padding: 15px 2
6px;
text-align: center;
align-items: center;
border-radius: 10px;
text-decoration: none;
justify-content: center;
display: inline-block;
backdrop-filter:
blur(
6px);
font-family: 'Microsoft Yahei';
background-color: rgba(255, 255, 255, 0.5);
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
#image-background button:hover {
box-shadow: 0 0
8px rgba(0, 0, 255, 0.
6),0 0 1
6px rgba(0, 0, 255, 0.4), 0 0 32px rgba(0, 0, 255, 0.2);
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.image-background_close{
top: 10px;
right: 12.5px;
font-size: 40px;
position: fixed;
font-weight: bold;
padding: 2px 20px;
background-color: none;
color: rgba(255,255,255,0.
75);
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.image-background_close:hover{
cursor: pointer;
border-radius:
6px;
text-decoration: none;
color: rgba(255,255,255,1);
background-color:rgba(0,0,0,0.5);
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
</style>
<script>
function demo(e){
if(e.wheelDelta){
if(e.wheelDelta > 0){
zoomIn();
}
if(e.wheelDelta < 0){
zoomOut();
}
}
}
window.add
EventListener("mousewheel",demo)
</script>
<div id="image-background">
<span style="font-size:22px;font-family:'Microsoft Yahei';background-color:rgba(0,0,0,0.2);padding:10px 20px;border-radius:4px;color:white;top:10px;left:12.5px;position:fixed;z-index:9999;">
图片预览
</span>
<img style="position: absolute;"id="new_image">
</br>
<div align="center"style="position:fixed;bottom:0;width:100%;">
<span class="image-background_close"onclick="document.getElementById('image-background').style.cssText='display:none';">
×
</span>
<button onclick="zoomIn()">
放大图片
</button>
<button onclick="zoomOut()">
缩小图片
</button>
<button onclick="rotateClockwise()">
顺
时针旋转90°
</button>
<button onclick="counterclockwiseRotation()">
逆
时针旋转90°
</button>
<button onclick="reset_image()">
1:1
</button>
<button onclick="window.open(new_image.src);">
在新窗口打开图片
</button>
<button onclick="information()">
查看图片信息
</button>
</div>
</div>
<script>
function reset_image(){
scale = 1;
rotateAngle = 0;
var image_number = document.getElementsByTagName('img');
var image_number = image_number.length - 1;
var img = document.getElementById('new_image');
document.getElementById('new_image').style.transform = `scale(${scale})`;
document.getElementById('new_image').style.transform = `rotate(${rotateAngle}deg) scale(${scale})`;
img.style.top = '50%';
img.style.left = '50%';
img.style.transform = 'translate(-50%, -50%)';
}
function zoomIn() {
scale += 0.1;
document.getElementById('new_image').style.transform = `rotate(${rotateAngle}deg) scale(${scale})`;
}
function zoomOut() {
scale -= 0.1;
if(scale < 0.1){
scale = 0.1;
return false;
}
else{
document.getElementById('new_image').style.transform = `rotate(${rotateAngle}deg) scale(${scale})`;
}
}
function rotateClockwise() {
rotateAngle += 90;
document.getElementById('new_image').style.transform = `rotate(${rotateAngle}deg) scale(${scale})`;
}
function counterclockwiseRotation() {
rotateAngle -= 90;
document.getElementById('new_image').style.transform = `rotate(${rotateAngle}deg) scale(${scale})`;
}
function information(){
alert(
"<span style='color:lightblue;'><b>["+new_image.width+"×"+new_image.height+"]</b></span>图片<b>信息</b></span>",
"<img src="+new_image.src+"></br></br><p style='font-size:1
8px;color:black'>图片宽度：<b>"+new_image.width+"</b></br>图片高度：<b>"+new_image.height+"</b></br>图片格式：<b>"+new_image.src.substr(new_image.src.lastIndexOf(".")+1)+"</b></br>路径：<a href='"+new_image.src+"'>"+new_image.src+"</a></br><span>"+new_image.title+"</span>",
"关闭<b>图片信息</b>"
)
}
</script>
<img src="
80cf53f3-1
68e-4.png">
<script type="text/
javascript">
window.onload = function(){
var new_image = document.getElementById("new_image");
move(new_image);
};
function move(obj){
obj.on
mousedown = function(
event){
obj.setCapture && obj.setCapture();
event =
event ||window.
event
var ol =
event.cl
ientX -obj.offsetLeft;
var ot =
event.cl
ientY - obj.offsetTop;
document.onmousemove = function(
event){
event =
event ||window.
event
var left =
event.cl
ientX-ol;
var top =
event.cl
ientY-ot;
obj.style.left = left+"px";
obj.style.top = top+"px";
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
obj.releaseCapture && obj.releaseCapture();
};
return false;
};
};
</script> 以上代码中，拖拽功能有
bug，拖动之后会恢复到中心位置，而且不能支持放大、旋转后拖动，修复上面的代码存在的
bug
本文探讨了mousedown事件在不同浏览器中对于输入框焦点的影响。在现代浏览器中，此事件可能会导致输入框失去焦点，但可以通过阻止默认行为来避免。然而，在IE6/7/8中，即便阻止默认行为，焦点丢失的问题仍然存在。
扫一扫
949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
