Question

我有很多div完全定位在背景图像上。

在页面上也会有一些按钮。当点击这些变量时，不同的变量会触发，缩小和增长这些div。

这是我目前使用的javascript ...

$(document).ready(function() {

var title = 1;

$(".button1").click(function() {
title = 1;  
});

$(".button2").click(function() {
title = 2;  
});

$(document).click(function(e) {
    console.log(title);
        if (title==1){
            $('.london').animate({ backgroundColor:'green', width:'50',  height:'50' }, 300);
        } else if (title==2){
            $('.london').animate({ backgroundColor:'red', width:'40',  height:'40' }, 300);
        }


});

});

由于它们处于绝对位置，因此它们会从它们定位的角落缩放。

查看示例here。

我需要做的是从这些中心点收缩并增长这些div。我见过的唯一解决方案似乎过于复杂。

我想我可以在jQuery中添加一半divs宽度的负边距来抵消这种情况？如果没有更好的解决方案，我会尝试一下

感谢您的帮助。

Answer 1

bboybeatle，你的＆＃34;负宽度为div宽度的一半＆＃34;这个想法很有意义，而且一点都不难实现。只需在两个动画中添加所需的marginTop和marginLeft设置即可。

$(function() {
    var cssMap1a = {
        backgroundColor: 'green'
    };
    var cssMap1b = {
        width: 50,
        height: 50,
        marginTop: -10,
        marginLeft: -10
    };
    var cssMap2a = {
        backgroundColor: 'red'
    };
    var cssMap2b = {
        width: 30,
        height: 30,
        marginTop: 0,
        marginLeft: 0
    };

    $(".button1").click(function () {
        $('.london').css(cssMap1a).animate(cssMap1b, 300);
    });
    $(".button2").click(function () {
        $('.london').css(cssMap2a).animate(cssMap2b, 300);
    });
});

这是 fiddle 。小提琴并不难设置。希望这可以帮助您下次需要在这里提出问题。

如您所见：

＆＃34;伦敦＆＃34;并且按钮被移动到更好的位置以用于演示目的
颜色变化被分离为单独的css贴图。当包含在动画地图中时，他们没有在小提琴中工作。 jQuery需要一个插件来动画颜色。

Answer 2

非常感谢@ Roamer-1888，我实际上使用了一些变量来使应用保证金更容易一些。我会记住将多个css属性放在变量中的技术..

这是我最终使用的代码片段......

londonMargin = london/2 - london;
$('.london').animate({ width:london,  height:london, marginLeft:londonMargin, marginBottom:londonMargin }, 300);

Answer 3

为了好玩，我把一个FIDDLE放在一起，它有一个函数，你传递一个元素名称，中心的x和y坐标，它将元素放在更大的元素中。

JS

var myelement = $('.boxdiv');
var myelement2 = $('.boxdiv2');

putmycenter( myelement, 90, 90 );
putmycenter( myelement2, 160, 280 );


function putmycenter (element, x, y)
{
  var boxdivxcentre = element.width()/2;
  var boxdivycentre = element.height()/2;
  var boxdivposx = (x - boxdivxcentre);
  var boxdivposy = (y - boxdivycentre);
  element.css({
                  "top" : boxdivposy + 'px',
                  "left" : boxdivposx + 'px'
                  });

}

从中心缩放绝对定位的div

3 个答案: