我想要做的是重现“房间视图”效果here
为了达到这个目的,我尝试使用这个jquery插件move.js
我的JS函数重现效果如下:
var wrapperObj = $('body');
var baseImg = $('#zaza');
$('body').addClass('wrapper_wall');
/* ...hide all html elements and set a background image to the body */
var squareWidth = $(wrapperObj).width();
var squareHeight = $(wrapperObj).height();
wrapperObj.width(squareWidth + 'px');
wrapperObj.height(squareHeight + 'px');
var topCoef = 0.1;
var scaleCoef = (imgWidthDim * 680 / 95)/460;
var imgWidth = baseImg.width();
var imgHeight = baseImg.height();
var imgRedimW = imgWidth * scaleCoef;
var imgRedimH = imgHeight * scaleCoef;
imgNewXPoint = (squareWidth/2 - imgRedimW/2);
imgNewYPoint = (topCoef * squareHeight);
oldPos = baseImg.offset();
$('#zaza').css('box-shadow', '0 5px 5px rgba(0, 0, 0, 0.6)');
console.log('old pos left: ' + oldPos.left);
console.log('new pos left: ' + imgNewXPoint);
console.log('move to: ' + (imgNewXPoint - oldPos.left));
move('#zaza')
.translate(imgNewXPoint - oldPos.left, imgNewYPoint - oldPos.top)
.scale(scaleCoef)
.duration('2s')
.end(function(){
console.log('end transition');
$('a#bts').css('display', 'block');
$('a.wall_view').addClass('on-the-wall');
newPos = $('#zaza').offset();
});
确定。所以,我的问题是我不能将图像(baseImg)置于屏幕中间(body - > wrapperObj);