JQ实现图片预览（轮播，放大缩小，拖拽，ajax请求，旋转）

我会带着你远行 2022-12-10 15:54 511阅读 0赞

jQuery实现图片预览（功能包括：ajax请求数据、弹出关闭蒙层、轮播、点击放大缩小、鼠标滚动放大缩小、键盘上下键放大缩小、旋转、拖拽），新手注意图标、bootstrop和jQuery文件的引入

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style>
    			element.style {
    			    z-index: 2000;
    			}
    			.el-image-viewer__wrapper {
    			    position: fixed;
    			    top: 0;
    			    right: 0;
    			    bottom: 0;
    			    left: 0;
    			}
    			.el-image-viewer__mask {
    			    position: absolute;
    			    width: 100%;
    			    height: 100%;
    			    top: 0;
    			    left: 0;
    			    opacity: .5;
    			    background: #000;
    			}
    			.el-image-viewer__close {
    			    top: 40px;
    			    right: 40px;
    			    width: 40px;
    			    height: 40px;
    			    font-size: 40px;
    			}
    			.el-image-viewer__btn {
    			    position: absolute;
    			    z-index: 1;
    			    display: flex;
    			    align-items: center;
    			    justify-content: center;
    			    border-radius: 50%;
    			    opacity: .8;
    			    cursor: pointer;
    			    box-sizing: border-box;
    			    user-select: none;
    			}
    			.el-image-viewer__next, .el-image-viewer__prev {
    			    top: 50%;
    			    transform: translateY(-50%);
    			    width: 44px;
    			    height: 44px;
    			    font-size: 24px;
    			    color: #fff;
    			    background-color: #606266;
    			    border-color: #fff;
    			}
    			.el-image-viewer__prev {
    			    left: 40px;
    			}
    			.el-image-viewer__btn {
    			    position: absolute;
    			    z-index: 1;
    			    display: flex;
    			    align-items: center;
    			    justify-content: center;
    			    border-radius: 50%;
    			    opacity: .8;
    			    cursor: pointer;
    			    box-sizing: border-box;
    			    user-select: none;
    			}
    			.el-image-viewer__next {
    			    right: 40px;
    			    text-indent: 2px;
    			}
    			.el-image-viewer__next, .el-image-viewer__prev {
    			    top: 50%;
    			    transform: translateY(-50%);
    			    width: 44px;
    			    height: 44px;
    			    font-size: 24px;
    			    color: #fff;
    			    background-color: #606266;
    			    border-color: #fff;
    			}
    			.el-image-viewer__btn {
    			    position: absolute;
    			    z-index: 1;
    			    display: flex;
    			    align-items: center;
    			    justify-content: center;
    			    border-radius: 50%;
    			    opacity: .8;
    			    cursor: pointer;
    			    box-sizing: border-box;
    			    user-select: none;
    			}
    			.el-image-viewer__actions {
    			    left: 50%;
    			    bottom: 30px;
    			    transform: translateX(-50%);
    			    width: 282px;
    			    height: 44px;
    			    padding: 0 23px;
    			    background-color: #606266;
    			    border-color: #fff;
    			    border-radius: 22px;
    			}
    			.el-image-viewer__btn {
    			    position: absolute;
    			    z-index: 1;
    			    display: flex;
    			    align-items: center;
    			    justify-content: center;
    			    /*border-radius: 50%;*/
    			    opacity: .8;
    			    cursor: pointer;
    			    box-sizing: border-box;
    			    user-select: none;
    			}
    			.el-image-viewer__canvas {
    			    width: 100%;
    			    height: 100%;
    			    display: flex;
    			    justify-content: center;
    			    align-items: center;
    			}
    			element.style {
    			    transform: scale(0.565) rotate(0deg);
    			    margin-left: 19px;
    			    margin-top: -10px;
    			    max-height: 100%;
    			    max-width: 100%;
    			}
    			body, html {
    			    margin: 0;
    			    padding: 0;
    			    height: 100%;
    			    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
    			    font-weight: 400;
    			    -webkit-font-smoothing: antialiased;
    			    -webkit-tap-highlight-color: transparent;
    			}
    			.el-image-viewer__wrapper{
    				display: none;
    			}
    			
    			
    			.el-image-viewer__actions__inner {
    			    width: 100%;
    			    height: 100%;
    			    text-align: justify;
    			    cursor: default;
    			    font-size: 23px;
    			    color: #fff;
    			    display: flex;
    			    align-items: center;
    			    justify-content: space-around;
    			}
    			.icon_close .icon-error{
    				font-size: 30px;
    			}
    			.el-image-viewer__actions__inner .iconfont{
    				font-size: 23px;
    				    cursor: pointer;
    				
    			}
    			.imags{
    				text-align: center;
    			}
    			.imags img{
    				margin:15px;
    			}
    			
    		</style>
    		<script src="js/jq3.js"></script>
    		
    		
    		<link rel="stylesheet" href="bootstrap@3.3.4/css/bootstrap.min.css" />
    		
    		
    		<script src="bootstrap@3.3.4/js/bootstrap.min.js"></script>
    		
    		
    		<link rel="stylesheet"  href="http://at.alicdn.com/t/font_2096509_i9xryvfibh9.css"/>
    		
    		
    	</head>
    	<body>
    		
    		
    		<div class="imags"> 
    			
    		</div>
    	<div tabindex="-1" class="el-image-viewer__wrapper" style="z-index: 2000;">
    		<div class="el-image-viewer__mask">
    			
    		</div>
    		<span class="el-image-viewer__btn el-image-viewer__close icon_close">
    			<i class="iconfont icon-error"></i>
    		</span>
    		<span class="el-image-viewer__btn el-image-viewer__prev icon_arrow_left">
    			<i class="iconfont icon-arrow-left-bold"></i>
    		</span>
    		<span class="el-image-viewer__btn el-image-viewer__next icon_arrow_right">
    			<i class="iconfont icon-arrow-right-bold"></i>
    		</span>
    		<div class="el-image-viewer__btn el-image-viewer__actions">
    			<div class="el-image-viewer__actions__inner">
    				<i class="iconfont icon-zoom-in"></i>
    				<i class="iconfont icon-zoom-out"></i>
    				
    				<i class="iconfont icon-quanping"></i>
    				
    				<i class="iconfont icon-xuanzhuan "></i>
    				<i class="iconfont icon-xuanzhuan-r"></i>
    			</div>
    		</div>
    		<div class="el-image-viewer__canvas">
    			<img src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" class="el-image-viewer__img" style="transform: scale(1) rotate(0deg); margin-left: 19px; margin-top: -10px; max-height: 100%; max-width: 100%;">
    			
    		</div>
    	
    	</div>
    	
    	<script>
    		//用到的变量
    		
    		//图片数组
    		var  imgData=[]
    		
    		//图片下标
    		var index=0
    		
    		//放大缩小倍数
    		var changeScale=1   
    		
    		//旋转角度
    		var changeRotate=0
    		//请求图片数组（5张）
    		
    		function requestData(){
    			
    			$.ajax({ 
    		        type:"GET", 
    		        url:"http://120.131.14.175/index.php/index/index/getImgList", 
    		        dataType:"json", 
    		        async:false,
    		        success:function(data){ 
    		        	
    		        	
    		        	imgData=data.data
    		        	
            			
    		        }, 
    		        error:function(jqXHR){ 
    		           aler("发生错误："+ jqXHR.status); 
    		        } 
    			}); 
    			
    		}
    		requestData()
    		console.log(imgData)
    		var lis=''
    		for(var i=0;i<imgData.length;i++){
    			lis+=`<img src=`+imgData[i]+` /> `
    		}
    		$('.imags').append(lis)
    		
    		$('.imags img').css({
    			"width":"100px",
    			"height":"100px"
    			
    		})
    		
    		
    		//点击图片弹出蒙层
    		
    		$(".imags img").on("click",function(){
    				index=$(this).index()
    //				console.log(index)
    				restore_()
    				location_()
    				$(".el-image-viewer__canvas img").attr("src",imgData[index])
    				$('.el-image-viewer__wrapper').css("display","block")
    		})
    		
    		//点击关闭蒙层
    		
    		$(".icon_close").on("click",function(){
    			$('.el-image-viewer__wrapper').css("display","none")
    			
    		})
    		
    		//轮播图
    		
    		//上一张图
    		$('.icon_arrow_left').bind("click",function(){
    			if(index==0){
    				index=4
    				$(".el-image-viewer__canvas img").attr("src",imgData[index])
    			}else{
    				$(".el-image-viewer__canvas img").attr("src",imgData[index-1])
    				index--
    			}
    			restore_()
    			location_()
    			$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")
    		})
    		
    		//下一张图
    		$('.icon_arrow_right').click(function(){
    			if(index==4){
    				index=0
    				$(".el-image-viewer__canvas img").attr("src",imgData[index])
    			}else{
    				$(".el-image-viewer__canvas img").attr("src",imgData[index+1])
    				index++
    			}
    			restore_()
    			location_()
    			$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")
    		})
    		
    		    //缩小           transform: scale(0.8) rotate(0deg);   改变scale
    		
    			//点击缩小
    		$('.icon-zoom-in').on("click",function(){
    
    			if(changeScale<=0.4){
    				changeScale=0.2
    			}else{
    				changeScale-=0.2
    			}
    			
    			
    			$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")
    		})
    		           
    		         
    		
    			//点击放大
    		$('.icon-zoom-out').on("click",function(){
    
    			if(changeScale>5.8){
    				changeScale=6
    			}else{
    				changeScale+=0.2
    			}
    			
    			
    			$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")
    		})
    		
    		
    		     //滚动缩小    放大
    		        
    		        $(".el-image-viewer__wrapper").bind('mousewheel',function(){
    				
    					//上滑
    					if(event.wheelDelta >= 120){
    						changeScale = changeScale+0.015
    					}else{
    						//下滑
    						changeScale = changeScale<=0.215?0.2:changeScale-0.015
    					}
    					$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")
    					
    				})  
    		
    		//保存当前图片的放大倍数和旋转角度
    		
    		$('.icon-quanping').on("click",function(){
    			alert("当前图片的放大倍数为："+changeScale+"，当前图片的旋转角度为："+changeRotate)
    		})
    		
    		//旋转     transform: scale(1) rotate(-90deg)
    		
    		//逆时针      减角度
    		$('.icon-xuanzhuan').on("click",function(){
    			changeRotate-=90
    			$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")
    		})
    		
    		//顺时针      加角度
    		
    		$('.icon-xuanzhuan-r').on("click",function(){
    			changeRotate+=90
    			$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")
    		})
    		
    		
    		
    		//键盘按下    放大缩小
    		 $(document).keydown(function (e) {
    		 	
    				var e=event  ||   window.event
    				var k=e.keyCode || e.which
            		if(k==38){
            			changeScale = changeScale+0.015
    			
    					
            		}else if(k==40){
            			changeScale = changeScale<=0.215?0.2:changeScale-0.015
            		}
            		
            		$('.el-image-viewer__img').css("transform","scale("+changeScale+") rotate("+changeRotate+"deg)")
            		
            		
            		return  false
    
        	}); 
    		
    		
    		//封装图片格式还原（用于轮播，弹出蒙层）
    		function restore_(){
    			changeScale=1 
    			changeRotate=0
    			
    		}
    		
    		//封装位置还原（用于轮播，弹出蒙层）
    		function  location_(){
    			$(".el-image-viewer__canvas").css({
    				"margin-left":"0px",
    				"margin-top":"0px"
    			})
    		}
    		
    		
    		
    		//封装拖动
    		
    		var drag = function(obj) {
    
    		    obj.bind("mousedown", start);
    		
    		    function start(event) {
    		        if (event.button == 0) { //判断是否点击鼠标左键  
    		            /*  
    		             * clientX和clientY代表鼠标当前的横纵坐标  
    		             * offset()该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。  
    		             * bind()绑定事件，同样unbind解绑定，此效果的实现最后必须要解绑定，否则鼠标松开后拖拽效果依然存在  
    		             * getX获取当前鼠标横坐标和对象离屏幕左侧距离之差（也就是left）值，  
    		             * getY和getX同样道理，这两个差值就是鼠标相对于对象的定位，因为拖拽后鼠标和拖拽对象的相对位置是不变的  
    		             */
    		            
    		            
    		            console.log("clientX:"+event.clientX)
    		            gapX = event.clientX - obj.offset().left;
    		            gapY = event.clientY - obj.offset().top;
    		            //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的  
    		            $(document).bind("mousemove", move);
    		            //此处的$(document)可以改为obj  
    		            $(document).bind("mouseup", stop);
    		
    		        }
    		        return false; //阻止默认事件或冒泡  
    		    }
    		
    		    function move(event) {
    		        obj.css({
    		            "margin-left": (event.clientX - gapX) + "px",
    		            "margin-top": (event.clientY - gapY) + "px"
    		        });
    		        return false; //阻止默认事件或冒泡  
    		    }
    		
    		    function stop() {
    		        //解绑定，这一步很必要，前面有解释  
    		        $(document).unbind("mousemove", move);
    		        $(document).unbind("mouseup", stop);
    		
    		    }
    		}
    	
     
    		//拖动
    		var objs=$(".el-image-viewer__canvas")
    		drag(objs)	
    	</script>
    	</body>
    </html>