From df32d2a833594da64587c7dad5531f4bfb4dcff2 Mon Sep 17 00:00:00 2001 From: kuohaowu <15015618196@163.com> Date: Tue, 17 Apr 2018 12:45:30 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B7=A6=E6=97=8B=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jquery-photo-gallery/icon/rotate_left.png | Bin 0 -> 14850 bytes .../icon/{rotate.png => rotate_right.png} | Bin jquery-photo-gallery/jquery.photo.gallery.js | 75 +++++++++++++----- jquery-photo-gallery/photoGallery.css | 57 ++++++++++--- 4 files changed, 99 insertions(+), 33 deletions(-) create mode 100755 jquery-photo-gallery/icon/rotate_left.png rename jquery-photo-gallery/icon/{rotate.png => rotate_right.png} (100%) mode change 100644 => 100755 diff --git a/jquery-photo-gallery/icon/rotate_left.png b/jquery-photo-gallery/icon/rotate_left.png new file mode 100755 index 0000000000000000000000000000000000000000..020ea8b21481be3f79e0309c931a9d4c25c9d5c1 GIT binary patch literal 14850 zcmeI3eQXnD9LJw!GGRglkq9i9qbQEd_U_tsZ7@- z7J&gF5e<+iBt{($5y-&s@`nflGNNciLreq_;va+r321zQAR%h-xwdPcbsY~F{(PFW z{q=di-{0@K&-2pz=hiniESOY0vlsv{sjk-348Nzq_v7P>;Ahvs4|VWsLbP^?3cw>% z^>+by=e_9w*h^)fU-NtGIZ+9lgn-f}nG)eBR0F_QCZdAaC23Tf6qF-Q!|z9q8z?#8 zG%U7y8E@1rb;z~7F{!1u!6){1iH?Aw(pAhSIG7+TX#$l9haxJMa2k?%IT-8Bw1G-W zv@WNiN-s$Hy^WMxiAj{zRACfZi=DDLOsv&mH>)TGP7Urs}ZrbRiLj>qGsxW%Nzf;8)JIB3R9o6Sb3FseNfO-L9c>YP-P z;XEEm6=QN#la&ai=M~zNZp~>h=!G(`^mT=!nL-gY%??te6GD_`O$?pS6c96>Xm>1> z99lr6rH~YsBAN<)Y+hfqL(vqqLm8uFrhCl7a8A75Ozphm4TtlVR<-Ko5J4JgUZ?8o ziAr>{q$=GpQL0`JFJ(@?tJmcA?BtBdr1y+Db}1o`Vbgn3w&YSs%@7Z-m2<}=K~rKr zMG3i5tE_PtA?0@KtI9@|dIeFA=v?RVbgn5o$ z*g1wllBAS5IlM|hZtoe+VK*}6M%LzI%^Y;IESdvR=H`GqC?IIUJ!L_)NS=VmwJWi( zptB*@d*MnsueSDaf3DKR)K$z|c`e9ed}xz@P4h^h$@QL6K}V1r4P0~})& zBujg_!)UjO?Z$Ge#cZ^<*&qc`Y_kgXHjCXMBq4gesC`swk0N&K`z4(^aG$9W`>50} z#AJBZ2_ZzIkN$p3L%EO8TC28iqGr z<`~PIQo1L(cR4}S&oh^(ZwV>D(<555!^$|*Hu?WfU@AXiAG=1pLyFvOL#0wBRbwYn zm3A#I#H6YqTod=U+f#W*8gmQqwEhnel1ENOs&(WH4X@eJGs^1+8wXbd9GQ@u1(v5r zwPh=(^nQI-L)}Te&CI|T&FY_NE83lFU2=CT+MR37Iu}J`&1Ftk%V|bj`stfG7+TaIF;p?ri{`P~Kd6vIc+xU!AAQm$>lZW@p(tVft6AuDE#r z(e8z8t$Fs^`kJB{-WT6EOU=6tKI_}C`lP4m)USo5^t-3$UjFzCYRCI0R>XMcl@ovN z>pJ}DzB}qGxBfk{b324j?74p9 z+SZp&l{_-XaW=XKRvs(3HUHeIdT@I6iOE;% zuQ8=y-+U2#*>{%n_V)cU`Q@2|-v=fi8h>ENg4T$cS_d#&WyU_($?>bqi?KWEC$r+)K(P_f{rN6!v+-YEZTOUcrL-qp`v y99LSfVra(xBL3B~Q|J2)-_2UJ$;O&*vS9kq8ROic^N01PH0!DxJbRyOUGpE&P&}vr literal 0 HcmV?d00001 diff --git a/jquery-photo-gallery/icon/rotate.png b/jquery-photo-gallery/icon/rotate_right.png old mode 100644 new mode 100755 similarity index 100% rename from jquery-photo-gallery/icon/rotate.png rename to jquery-photo-gallery/icon/rotate_right.png diff --git a/jquery-photo-gallery/jquery.photo.gallery.js b/jquery-photo-gallery/jquery.photo.gallery.js index cbeaac4..d799ebc 100644 --- a/jquery-photo-gallery/jquery.photo.gallery.js +++ b/jquery-photo-gallery/jquery.photo.gallery.js @@ -34,7 +34,8 @@ $.fn.extend({ '' + '' + '' + - '' + + '' + + '' + '' + '' + '', @@ -57,7 +58,8 @@ $.fn.extend({ $fullscreen = $(this).find(".oper_fullscreen"), $bigger = $(this).find(".oper_bigger"), $smaller = $(this).find(".oper_smaller"), - $rotate = $(this).find(".oper_rotate"), + $rotate_left = $(this).find(".oper_rotate_left"), + $rotate_right = $(this).find(".oper_rotate_right"), $download = $(this).find(".oper_download"), $prev = $(this).find(".prev"), $next = $(this).find(".next"), @@ -268,26 +270,57 @@ $.fn.extend({ smallerImage(); }); - //旋转 - $rotate.on("click", function(){ - - var rotateClass = $image.attr("class").match(/(rotate)(\d*)/); + //左旋转 + $rotate_left.on("click", function(){ + + var rotateClass = $image.attr("class").match(/(rotate)(-?)(\d*)/); + // 是否已经进行了旋转，是则计算周期，继续旋转 + if(rotateClass){ + // 如果不存在-号，则为右旋转转左旋转，要顺接右旋转状态 + if (!rotateClass[2]) { + rotateClass[3] = parseInt(rotateClass[3]) + 180 + } + var nextDeg = (rotateClass[3] * 1 + 90) % 360; + $image.removeClass(rotateClass[0]).addClass("rotate-" + nextDeg); + $thumbImg.removeClass(rotateClass[0]).addClass("rotate-" + nextDeg); + resizeImage(nextDeg); + resizeThumbImg(nextDeg); + isVertical = nextDeg == 90 || nextDeg == 270; + } else{ // 否则添加一个初始旋转的rotate + $image.addClass("rotate-90"); + $thumbImg.addClass("rotate-90"); + resizeImage("90"); + resizeThumbImg("90"); + isVertical = true; + } + }); + + //右旋转 + $rotate_right.on("click", function(){ + + var rotateClass = $image.attr("class").match(/(rotate)(-?)(\d*)/); + if(rotateClass){ + // 如果存在-号，则为左旋转转右旋转，要顺接左旋转状态 + if (rotateClass[2]) { + rotateClass[3] -= 180 + } + var nextDeg = (rotateClass[3] * 1 + 90) % 360; + $image.removeClass(rotateClass[0]).addClass("rotate" + nextDeg); + $thumbImg.removeClass(rotateClass[0]).addClass("rotate" + nextDeg); + // nextDeg取绝对值，防止左旋转然后右旋转顺接时， nextDeg为负数的情况 + nextDeg = Math.abs(nextDeg) + resizeImage(nextDeg); + resizeThumbImg(nextDeg); + isVertical = nextDeg == 90 || nextDeg == 270; + } else{ + $image.addClass("rotate90"); + $thumbImg.addClass("rotate90"); + resizeImage("90"); + resizeThumbImg("90"); + isVertical = true; + } + }); - if(rotateClass){ - var nextDeg = (rotateClass[2] * 1 + 90) % 360; - $image.removeClass(rotateClass[0]).addClass("rotate" + nextDeg); - $thumbImg.removeClass(rotateClass[0]).addClass("rotate" + nextDeg); - resizeImage(nextDeg); - resizeThumbImg(nextDeg); - isVertical = nextDeg == 90 || nextDeg == 270; - } else{ - $image.addClass("rotate90"); - $thumbImg.addClass("rotate90"); - resizeImage("90"); - resizeThumbImg("90"); - isVertical = true; - } - }); //下载 $download.on("click", function(){ diff --git a/jquery-photo-gallery/photoGallery.css b/jquery-photo-gallery/photoGallery.css index faddc40..9d190bd 100644 --- a/jquery-photo-gallery/photoGallery.css +++ b/jquery-photo-gallery/photoGallery.css @@ -78,10 +78,15 @@ i{ height: 19px; background-image: url('icon/smaller.png'); } -.icon_tool-rotate{ +.icon_tool-rotate_left{ width: 17px; height: 20px; - background-image: url('icon/rotate.png'); + background-image: url('icon/rotate_left.png'); +} +.icon_tool-rotate_right{ + width: 17px; + height: 20px; + background-image: url('icon/rotate_right.png'); } .icon_tool-download{ width: 16px; @@ -98,24 +103,52 @@ i{ height: 38px; background-image: url('icon/next.png'); } -/* 效果 */ -.rotate0{ - transform: rotate(0deg); - -webkit-transform: rotate(0deg); +/* 右旋转 */ +.rotate0, .rotate-0{ + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -moz-transform: rotate(0deg); } .rotate90{ - transform: rotate(90deg); - -webkit-transform: rotate(90deg); + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -moz-transform: rotate(90deg); } .rotate180{ - transform: rotate(180deg); - -webkit-transform: rotate(180deg); + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -moz-transform: rotate(180deg); } .rotate270{ - transform: rotate(270deg); - -webkit-transform: rotate(270deg); + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + -moz-transform: rotate(270deg); } +/* 左旋转 */ +.rotate-90{ + transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); +} +.rotate-180{ + transform: rotate(-180deg); + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + -moz-transform: rotate(-180deg); +} +.rotate-270{ + transform: rotate(-270deg); + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + -moz-transform: rotate(-270deg); +} + .gallery{ width: 100%; height: 100%;