弹窗中图片的旋转样式问题
目前主要js使用的旋转大多为css样式transform, css3,以及cavas,这里主要讲的使用css的属性实现的旋转功能,由于笔者当时在网上未能找到答案,故事后解决问题了分享下经验。
背景
该需求是要在一个弹窗中做一个图片旋转功能,并且在title上需要能够展示内容。
弹窗使用的是dialog查件,思路是在关闭按钮的旁边加上旋转的按钮,每次点击后让弹窗里面的图片旋转90°,旋转的代码如下
var dialog = bootbox.dialog({
title: "<span class='modal-title m-r-sm'>"+预览+"</span>"+showStr+"<a style='float: right' class='glyphicon glyphicon-repeat m-r-sm rotate' href='javascript:;'></a>",
size:'large',
message: '<img class="img-responsive rotateImg" data-rotate="0" style="margin: 0 auto transform: rotate(0deg)" src="'+this.src+'"/>'
}).on('click','.rotate',function(e){
var rotateIndex = Number($('.rotateImg').data('rotate'));
rotateIndex++;
var rotateAdd = rotateIndex*90;
$('.rotateImg').data('rotate',rotateIndex);
var img = dialog.find('.modal-body img');
img.css({
transform: 'rotate('+rotateAdd+'deg)'
});
})
给img添加了data属性,用于记录旋转次数,初始为0,旋转一次后为1,以此类推…,这里展示旋转一次后的结果。
问题来了,旋转后的图片脱离了原来所占区域,不仅如此,还将上图红框中区域遮挡住了(如果里面有其他内容,可能产生bug), 怎么办? 直观的办法是将图片往下移,将遮挡的部分挪下来即可,可是如何实现? 旋转的基本逻辑是有个旋转中心,X,Y,Z轴,2维下没有Z轴,默认图示
旋转90°后图示,
所以通过改变旋转中心是行不通的,那么如果使用定位可行吗?既然有想法就要采取行动,这个在没有思路的时候很好用。
根据上图不难发现,只有在旋转出现90°和它的倍数角度在可能出现超出的情况,所以这里要想判断下,然后对比0°和90°区别,这里将两个示例图重合
上代码
var dialog = bootbox.dialog({
title: "<span class='modal-title m-r-sm'>"+LANG._CUSTOMER_RULE_PREVIEW_+"</span>"+showStr+"<a style='float: right' class='glyphicon glyphicon-repeat m-r-sm rotate' href='javascript:;'></a>",
size:'large',
message: '<img class="img-responsive rotateImg" data-rotate="0" style="margin: 0 auto transform: rotate(0deg)" src="'+this.src+'"/>'
}).on('click','.rotate',function(e){
var rotateIndex = Number($('.rotateImg').data('rotate'));
rotateIndex++;
var rotateAdd = rotateIndex*90;
$('.rotateImg').data('rotate',rotateIndex);
var img = dialog.find('.modal-body img');
img.css({
transform: 'rotate('+rotateAdd+'deg)'
});
if(rotateIndex%2 !== 0){ // 新增的逻辑
var rotateH = img.width()/2 - img.height()/2;
img.css({
position: 'absolute',
top: rotateH
})
}else{
img.css({
position: 'absolute',
top: 0,
left: 0
})
}
})
问题成功解决,看下效果
主要问题解决,哈哈哈!剩下的解决下弹窗样式就OK了。