Skip to content

添加左旋转 #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

添加左旋转 #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added jquery-photo-gallery/icon/rotate_left.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 jquery-photo-gallery/icon/rotate.png → jquery-photo-gallery/icon/rotate_right.png
100644 → 100755
View file
Open in desktop
File renamed without changes
75 changes: 54 additions & 21 deletions jquery-photo-gallery/jquery.photo.gallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ $.fn.extend({
'<span class="oper_fullscreen" title="查看全屏"><i class="icon_tool-fullscreen"></i></span>' +
'<span class="oper_bigger" title="放大图片"><i class="icon_tool-bigger"></i></span>' +
'<span class="oper_smaller" title="缩小图片"><i class="icon_tool-smaller"></i></span>' +
'<span class="oper_rotate" title="向右旋转"><i class="icon_tool-rotate"></i></span>' +
'<span class="oper_rotate_left" title="向左旋转"><i class="icon_tool-rotate_left"></i></span>' +
'<span class="oper_rotate_right" title="向右旋转"><i class="icon_tool-rotate_right"></i></span>' +
'<span class="oper_download" title="下载图片"><i class="icon_tool-download"></i></span>' +
'</div>' +
'</div>',
Expand All @@ -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"),
Expand Down Expand Up @@ -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(){
Expand Down
57 changes: 45 additions & 12 deletions jquery-photo-gallery/photoGallery.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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%;
Expand Down