缩放图像并将其移动到屏幕中间

时间:2013-11-24 14:56:06

标签: jquery css3 jquery-plugins

我想要做的是重现“房间视图”效果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);

0 个答案:

没有答案