左右翻，旋转查看图片 绚丽效果

其他 2018-07-28 15:32:47 阅读次数: 0

利用JQuery 弹出图层，查看列表图片，可左右翻转，可旋转查看图片。

效果如下：

可左右翻转，旋转图片查看不同效果。

代码实现：
  一，引用资源文件：

<script type="text/javascript" src="../js/jquery.js"></script>
<link type="text/css" rel="stylesheet" href="../css/showImages.css" />
二、html  代码实现 

<div style="min-height:306px;width:560px; padding-left:5px;">
<!-- 模拟设置获取的图片路径 -->
<c:set var="imgUrls" value="2016/01/28/17/WH_720_1281_1453974732080_1959.jpg,2016/01/28/17/WH_720_1004_1453974732580_1960.jpg,2016/01/28/17/WH_720_436_1453974732790_1961.jpg,2016/01/28/17/WH_720_720_1453974733122_1962.jpg,2016/01/28/17/WH_720_720_1453974733349_1963.jpg"></c:set>
	 <!-- 模拟设置服务器地址 -->
	 <c:set var="resource_url" value="http://img.abc.com/"/>
	 <c:forEach items="${imgUrls }" var="imgUrl">
	        <div class="left tpmg">
	             <p class="xz_cs"><a onclick="showImage('${imgUrl }','${imgUrls}','${resource_url}')"><img src="${resource_url}${imgUrl }"  width="136" height="101" /></a></p>
	           <img width="152" height="115"  src="../images/common/mr.jpg" />
	             </div>
	        </c:forEach>
			<div class="clears"></div>
		</div>
	  <jsp:include page="/WEB-INF/jsp/common/showImage.jsp" />

三、showImage.jsp 代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!--弹出框内容-->  
<div id="imageBackDiv"  style="background:none repeat scroll 0% 0% #000; top:0px; left:0px; width:100%; height:100%; position:absolute; -moz-opacity:0.5; filter:alpha(opacity=50); opacity:0.5; z-index:100; display:none;"></div>
<div id="showImgDiv" class="phhoto_ck" style="z-index:9999; left: 25%; top:10%; position: absolute; display:none;">
	<p class="gban">
     	<a href="javascript:void(0);" onclick="hideImage()">
     	   <img src="../images/common/close_gray.png" onmousemove="javascript:this.src='../images/common/close_orange.png'" onmouseout="javascript:this.src='../images/common/close_gray.png'" style="cursor: pointer;"/></a>
    </p>
	<div class="photo_show">
    	<div class="left jt_cs" style="margin-left: 5px"><img id="pre" src="../images/common/right_bt.png"  onmousemove="javascript:this.src='../images/common/right_bt_on.png'" onmouseout="javascript:this.src='../images/common/right_bt.png'" style="cursor: pointer;"/></div>
        <div class="left photp_area">
       		<div id="focus">
    			<canvas id="canvas"></canvas>
				<ul id="imageUl"></ul>
			</div>
        </div>
        <div class="right jt_cs" style="margin-right: 5px"><img id="next" src="../images/common/left_bt.png"  onmousemove="javascript:this.src='../images/common/left_bt_on.png'" onmouseout="javascript:this.src='../images/common/left_bt.png'" style="cursor: pointer;"/></div>
        <div class="imgclears"></div>
    </div>
 	<div class="rotate_box">
 		<p class="left rotate_tp"><img id="left" src="../images/common/rotate_left.png"  onmousemove="javascript:this.src='../images/common/rotate_lefton.png'" onmouseout="javascript:this.src='../images/common/rotate_left.png'" style="cursor: pointer;"/></p>
     	<p class="left rotate_tp"><img id="right" src="../images/common/rotate_right.png"  onmousemove="javascript:this.src='../images/common/rotate_righton.png'" onmouseout="javascript:this.src='../images/common/rotate_right.png'" style="cursor: pointer;"/></p>
     	<p class="imgclears"></p>
 	</div>
</div>
<script>
	function showImage(src,srcs,front) {
		var sWidth, sHeight;
		src = chuli(src);
		srcs = chuli(srcs);
		sWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
		sHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
		$('#imageBackDiv').css('width', sWidth);
		$('#imageBackDiv').css('height', sHeight);
		$("#showImgDiv").css("left",(sWidth-$('#showImgDiv').width())/2);//居中
		$("#showImgDiv").css("top",$(document).scrollTop()+100);
		if(srcs != null){
			var images = chuli(srcs).split(",");
			var html = '';
			for(var i=0;i<images.length;i++){
				html+='<li id="'+(front+images[i]).replaceAll("\\.","").replaceAll(":","").replaceAll("/","")+'"><img style="vertical-align:middle;"  class="showImage" id="showImg'+i+'" width="520" height="520"  src="'+front+images[i]+'"/></li>';
			}
			//alert(html);
			$("#imageUl").append(html);
			init();
			var current = $("#"+(front+src).replaceAll("\\.","").replaceAll(":","").replaceAll("/","")).index();
			showPics(current);
		}
		$('#imageBackDiv').fadeIn("fast");
		$("#showImgDiv").fadeIn("fast");
	}
	var sWidth;
	var len;
	var index;
	var picTimer;
	function init(){
		sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
		len = $("#focus ul li").length; //获取焦点图个数
		index = 0;
		picTimer;
	}

	$(function() {
		//上一页按钮
		$("#pre").click(function() {
			index -= 1;
			if(index == -1) {index = len - 1;}
			showPics(index);
		});
		
		//下一页按钮
		$("#next").click(function() {
			index += 1;
			if(index == len) {index = 0;}
			showPics(index);
		});

		//左旋转
		$("#left").click(function() {
			//alert(index);
			param.rot += 90;
			rotate(param.cv, param.img, param.rot);
			if(param.rot == 270){
				param.rot = -90;	
			}
		});
		//右选择
		$("#right").click(function() {
			param.rot -= 90;
			if(param.rot == -90){
				param.rot = 270;	
			}
			rotate(param.cv, param.img, param.rot);	
		});
	});
		
	//选择参数
	var param = {
		img: null,
		cv: document.getElementById("canvas"),
		rot: 0
	};
	
	//旋转方法
	function rotate(canvas,img,rot){
		//获取图片的高宽
		var w = img.width;
		var h = img.height;
		//alert(w);
		//角度转为弧度
		if(!rot){
			rot = 0;	
		}
		var rotation = Math.PI * rot / 180;
		var c = Math.round(Math.cos(rotation) * 1000) / 1000;
		var s = Math.round(Math.sin(rotation) * 1000) / 1000;
		//旋转后canvas标签的大小
		canvas.height = Math.abs(c*h) + Math.abs(s*w);
		canvas.width = Math.abs(c*w) + Math.abs(s*h);
		//绘图开始
		var context = canvas.getContext("2d");
		//alert(context);
		context.save();
		//改变中心点
		if (rotation <= Math.PI/2) {
			context.translate(s*h,0);
		} else if (rotation <= Math.PI) {
			context.translate(canvas.width,-c*h);
		} else if (rotation <= 1.5*Math.PI) {
			context.translate(-c*w,canvas.height);
		} else {
			context.translate(0,-s*w);
		}
		//旋转90°
		context.rotate(rotation);
		//绘制
		//if(rot/90%2 == 1)
		context.drawImage(img, 0, 0, w, h);
		context.restore();
		$("#canvas").show();
		img.style.display = "none";	
	}

	//显示图片函数，根据接收的index值显示相应的内容
	function showPics(index) { //普通切换
		var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
		$("#canvas").hide();
		$(".showImage").show();
		//alert($("li[indexValue='"+index+"']").find("img").attr("src"));
		param.img = document.getElementById("showImg"+index);//$("li[indexValue='"+index+"']").find("img");
		$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
	}
	

	function hideImage() {
		$('#imageBackDiv').fadeOut("fast");
		$("#showImgDiv").fadeOut("fast");
	}

	function chuli(value){
		value = value.replace(",,",",");				//有双逗号的，改成只有一个
		if(value.indexOf(",") == 0){
			value = value.substring(1,value.length);
		}
		if(value.lastIndexOf(",") == value.length-1){
			value = value.substring(0,value.length-1);
		}
		if(value.indexOf(",,") > -1){
			value = chuli(value);
		}
		return value;
	}

	String.prototype.replaceAll = function(s1,s2){ 
		return this.replace(new RegExp(s1,"gm"),s2); 
	}
</script>

四、showImages.css 资源文件： 

body{ margin:0; padding:0; font-family:Arial, Helvetica, sans-serif, 宋体;  }
div,dl,dt,dd,ul,p,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote{ padding:0;  margin:0; }
img{border:0;}
.clears{clear:both;height:0px;line-height:0px;font-size:0px;padding:0px;margin:0px;}
.left { float:left;}
.right { float:right;}
.tpmg { width:152px; height:115px; margin-right:20px; position:relative; margin-top:12px; border:solid 1px #d9d9d9;}
.left { float:left;}
.tpmg .xz_cs{ position:absolute; right:8px; top:7px;}
.clears {clear:both;height:0px;line-height:0px;font-size:0px;padding:0px;margin:0px;}

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{zoom:1;}
ul,li{list-style:none;}
img{border:0;}
.wrapper{width:520px;margin:0 auto;padding-bottom:50px;}
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;}
/* focus */
#focus{width:520px;height:520px;overflow:hidden;position:relative;text-align:center;margin:0 auto;vertical-align: middle;}
#focus ul{height:520px;position:absolute;}
#focus ul li{float:left;width:520px;height:520px;overflow:hidden;position:relative;background:#fff;text-align:center;display: block;margin:0 auto;}
#focus ul li div{position:absolute;overflow:hidden;}
#focus .btnBg{position:absolute;width:520px;height:20px;left:0;bottom:0;background:#000;}
#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}
#focus .btn span.on{background:#fff;}
#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;}
#focus .pre{left:0;}
#focus .next{right:0;background-position:right top;}
#focus ul li a{width: 520;height: 520}
.phhoto_ck { width:620px; height:620px; background:#fff;}
.gban { position:absolute; top:20px; right:20px;}
.photo_show { width:600px; height:520px; margin:42px auto 0px auto;}
.photp_area { width:520px; height:520px; margin-left:10px;}
.jt_cs { margin-top:220px;}
.rotate_box { margin:0px auto;margin-top:10px ;width:100px; padding:0px 0px 0px 0px;}
.rotate_tp { margin-left:10px;}
.imgclears { clear:both;height:0px;line-height:0px;font-size:0px;padding:0px;margin:0px;}


如上，属于自己总结，工具类文件，如有什么问题，请联系我，忘不吝赐教


猜你喜欢

转载自blog.csdn.net/ly10265139/article/details/50896146
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022