原生js实现图片预览,旋转,放大,缩小,拖拽

最新推荐文章于 2024-04-18 16:42:41 发布

何以减压

最新推荐文章于 2024-04-18 16:42:41 发布

阅读量1.1k

点赞数 3

文章标签： javascript css css3

本文链接：https://blog.csdn.net/yxp12345678/article/details/129745316

版权

效果图.png

###HTML代码

  <!DOCTYPE html>
<html lang="zh">
<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">
	<title></title>
	<link rel="stylesheet" type="text/css" href="upload.css"/>
	<script type="text/javascript" src="upload.js"></script>
</head>
<body>
		<img src="壁纸1.jpg" onclick="imgSee(this)" >
		<div class="imgSee" style="z-index: 999;">
			<div id="imgbox">
				<img  id="imgSeeimg">
			</div>
			<!--功能区-->
			<div class="function">
				<i class="imgEnlarge" onclick="enlarge()"></i>
				<i class="imgNarrowe" onclick="narrowe()"></i>
				<i class="imgIcon" onclick="imgRotate()"></i>
				<a onclick="imgDisappea(this)"></a>
			</div>
		</div>
		
</body>
</html>

###CSS代码(有几个功能背景图，在最下面)

#prompt3 {
 width: 100px;
 height: 100px;
 /*z-index: 999;*/
 float: left;
 /*border: 1px solid black;*/
 text-align: center;
 position: relative;
}
#imgSpan {
 position: absolute;
 /*top: 25px;*/
 /*left:15px;*/
	/*background-color: #52a7f8;*/
	color: #ffffff;
	border-radius: 5px;
	width: 100px;
	height: 100px;
	/*padding-top: 36px;*/
}
#imgSpan:hover{
	background-color: #1879d4;
}

.filepath {
 width: 100%;
 height: 100%;
 opacity: 0;
}
#previewImg{
	float: left;
}
#previewImg p{
	width: 100px;
	height: 100px;
	margin-right: 5px;
	float: left;
	position: relative;
	padding-bottom:17px ;
}
#previewImg img{
	width: 100px;
	height: 100px;
	border: 1px solid #d4d4d4;
	padding: 5px;
}
#previewImg span{
	cursor:pointer;
	position: absolute;
	bottom:-10px;
	display: none;
	background: #999999;
	border-radius: 5px;
	color: #fff;
	padding: 2px 5px;
	left: 30px;
}
#previewImg p:hover .delSpan{
	display: inline-block;
}
.imgSee{
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0,0,0,0.1);
	top: 0;
	left: 0;
	display: none;
}
#imgbox{
	width: 800px;
	height: 800px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -400px;
	margin-left: -400px;
	text-align: center;
}
#imgSeeimg{
	display: inline-block;
}
.function a{
	display: block;
	width: 32px;
	height: 32px;
	background-image: url(x.png);
	text-decoration: none;
	color: #000000;
	background-size: 100%;
}
.function{
	width: 150px;
	background-color: #FFFFFF;
	position: absolute;
	display: flex;
	justify-content: space-between;
	right: 6%;
	top: 50px;
}
.imgIcon{
	display: block;
	width: 32px;
	height: 32px;
	background-image: url(xuanzhuan.png);
	background-size: 100%;
}

.imgEnlarge{
	display: block;
	width: 32px;
	height: 32px;
	background-image: url(./fangda.png);
	background-size: 100%;
}
.imgNarrowe{
	display: block;
	width: 32px;
	height: 32px;
	background-image: url(./suoxiao.png);
	background-size: 100%;
}

###JS代码

function changepic() {
   		var file = document.getElementById('file')
   		var reads = new FileReader();
   		var preview = $('#file').parent().prev();
   		var str = ''
   		f = file.files[0];
   		// 将图片存入
   		reads.readAsDataURL(f);
   		reads.onload = function() {
   			str = "<p><img src='" + this.result +
   				"' onclick='imgSee(this)' title='点击查看图片'/><span class='delSpan' onclick='del(this)'>删除</span></p>"
   			preview.append(str);
   		}
   		
   		if (preview.children().length >= 2) {
   			file.parentNode.style.cssText = 'display: none;'
   			return
   		}
   		file.value = null
   	};
   	// 删除写法
   	function del(e) {
   		// 兼容IE的写法
   	
   	    document.getElementById('file').value = null
   	    document.getElementById('prompt3').style.cssText = 'display: block;'
   	
   		e.parentNode.parentNode.removeChild(e.parentNode);
   		// e.parentNode.remove()
   	}
   	// 查看图片函数
   	// 先保存原始宽度
   	var initialWith = 0
   	// 显示图片
   	function imgSee(e) {
   		var imgDisplay = document.getElementsByClassName('imgSee')[0];
   		document.onselectstart = function(){return false;}
   		imgDisplay.style.cssText = 'display: block; z-index: 999'
   		document.getElementById('imgSeeimg').src = e.src
   		document.getElementById('imgSeeimg').style.cssText = "transform:rotate(0deg)"
   		n=0
   		document.getElementById('imgSeeimg').style.marginTop = (800-document.getElementById('imgSeeimg').height)/2 + 'px'
   	}
   	// 点击后图片消失
   	function imgDisappea(e) {
   		document.onselectstart = function(){return true;}
   		e.parentNode.parentNode.style.cssText = 'display: none;'
   		document.getElementById('imgSeeimg').style.cssText = ''
   	}
   	var n=0
   	var i=1
   	// 点击后图片旋转90度
   	function imgRotate(){
   		let img =  document.getElementById('imgSeeimg')
   		var time = setInterval(function(){
   			n +=5
   			if(n==90*i){
   				i++
   				clearInterval(time)
   			}
   			img.style.transform= "rotate("+n+"deg)"
   		},30)
   		
   	}
   	window.onload = function(){
   		var dv = document.getElementById('imgSeeimg');
   		var x = 0;
   		var y = 0;
   		var l = 0;
   		var t = 0;
   		var isDown = false;
   		//鼠标按下事件
   		dv.onmousedown = function(e) {
   		    //获取x坐标和y坐标
   		    x = e.clientX;
   		    y = e.clientY;
   			e.preventDefault();
   		    //获取左部和顶部的偏移量
   		    l = dv.offsetLeft;
   		    t = dv.offsetTop;
   		    //开关打开
   		    isDown = true;
   		    //设置样式  
   			dv.style.position = 'absolute'
   			document.getElementById('imgSeeimg').style.marginTop = '0px'
   			var nx = e.clientX;
   			var ny = e.clientY;
   			var nx = e.clientX;
   			var ny = e.clientY;
   			var nl = nx - (x - l);
   			var nt = ny - (y - t);
   			dv.style.left = nl + 'px';
   			dv.style.top = nt + 'px';
   		    dv.style.cursor = 'move';
   		}
   		//鼠标移动
   		window.onmousemove = function(e) {
   		    if (isDown == false) {
   		        return;
   		    }
   			document.getElementById('imgSeeimg').style.marginTop = '0px'
   			// dv.style.position = 'absolute'
   		    //获取x和y
   		    var nx = e.clientX;
   		    var ny = e.clientY;
   		    //计算移动后的左偏移量和顶部的偏移量
   		    var nl = nx - (x - l);
   		    var nt = ny - (y - t);
   		    dv.style.left = nl + 'px';
   		    dv.style.top = nt + 'px';
   		}
   		//鼠标抬起事件
   		dv.onmouseup = function() {
   		    //开关关闭
   		    isDown = false;
   		    dv.style.cursor = 'default';
   		}
   	}
   	// 放大图片功能
   	function enlarge(){
   		var width= document.getElementById('imgSeeimg').width
   		var n = width
   		var time = setInterval(function(){
   			n = n+10
   			if(n>width*1.2){
   				clearInterval(time)
   			}
   			document.getElementById('imgSeeimg').style.width = n+'px'
   		},30)
   	}
   	function narrowe(){
   		// if(initialWith!=0){
   		// 	document.getElementById('imgSeeimg').style.width = initialWith+'px'
   		// }
   		var width = document.getElementById('imgSeeimg').width
   		var n = width
   		var time = setInterval(function(){
   			n = n-10
   			if(n<width*0.8){
   				clearInterval(time)
   			}
   			document.getElementById('imgSeeimg').style.width = n+'px'
   		},30)
   	}

###所用到的图片

壁纸1.jpg