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

利用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 οnclick="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);" οnclick="hideImage()"><img src="../images/common/close_gray.png" οnmοusemοve="javascript:this.src='../images/common/close_orange.png'" οnmοuseοut="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"  οnmοusemοve="javascript:this.src='../images/common/right_bt_on.png'" οnmοuseοut="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"  οnmοusemοve="javascript:this.src='../images/common/left_bt_on.png'" οnmοuseοut="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"  οnmοusemοve="javascript:this.src='../images/common/rotate_lefton.png'" οnmοuseοut="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"  οnmοusemοve="javascript:this.src='../images/common/rotate_righton.png'" οnmοuseοut="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;}

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

左右翻，旋转查看图片绚丽效果相关推荐

android仿微信头像点击放大查看,仿微信查看图片（带大小图切换查看）
之前一直想仿微信朋友圈那样做个图片查看,但是看了网上很多demo都觉得比较简单,少了从小图切换到大图的加载过程,都只是在所有预览里加载大图,点击进去也是加载大图,于是在网上下载了别人的demo自己修改 ...
前端图片上传发现图片倒置解决方案图片镜像效果实现
图片倒置解决方案前端使用canvas将颠倒的图片进行旋转矫正图片镜像效果实现通过scale调整方向即可. scale(scaleX, scaleY):通过在 x 轴乘以 scaleX.在 y 轴 ...
图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)
以前要实现图片的旋转或翻转,只能用ie的滤镜来实现,虽然canvas也实现,但ie不支持而且不是html标准. css3出来后,终于可以用标准的transform来实现变换,而canvas也已成为ht ...
原生js实现查看图片效果
网页查看图片原理:点击图片的时候创建一个div标签和一个img标签,将div标签通过appendChild方法加入body中,再将img标签加入div标签中.对html中的图片标签进行监听(并不是我们 ...
JavaFx+JFoenix 点击翻页按钮查看图片
JavaFx+JFoenix 点击翻页按钮查看图片 1. 前言实现一个小Demo,通过点击翻页按钮,实现循环查看每一张图片.当查看到最后一张图片后,再次点击按钮查看第一张图片,开始下一轮循环. 1. ...
高仿QQ音乐之旋转专辑图片的实现—仿留声机效果
前言:应个人毕业设计的需求,要做一款音乐播放器,其中一个页面效果就是仿照QQ音乐的播放界面做一个可旋转的圆形专辑图片,效果如下: 通过最终设计与实现,我们的效果如下: 这里要实现旋转的圆形图,我们首先 ...
php js 图片旋转,jQuery实现可以控制图片旋转角度效果
本文实例讲述了jQuery实现可以控制图片旋转角度效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下:/p> "http://www.w3.org/TR/xhtm ...
推荐12个绚丽的CSS3图片悬停效果
CSS3为我们开发提供了很多特效,如鼠标悬停,线性渐变,在web开发早期常用的是鼠标悬停,他是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,后来慢慢演变成现在的是图片悬停效果,现在我 ...
html局部翻页效果,(html)图片局部特写效果
---------------------------------------------------------------------------- 图片局部特写效果代码: cellPadding ...

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

左右翻，旋转查看图片绚丽效果相关推荐

最新文章

热门文章

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

左右翻，旋转查看图片 绚丽效果相关推荐

最新文章

热门文章

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

左右翻，旋转查看图片绚丽效果相关推荐