Javascript 如何使用CSS3缩放DIV元素并保持它们之间的距离_Javascript_Jquery_Html_Css

Javascript 如何使用CSS3缩放DIV元素并保持它们之间的距离

javascript jquery html css

Javascript 如何使用CSS3缩放DIV元素并保持它们之间的距离,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在“工作区”分区内缩放一些分区。我遇到的问题是它们之间的距离（我失去了它）我读了很多关于CSS3转换的文章，特别是关于缩放、平移和原点的文章，但我不能解决这个问题有人能解释一下我怎样才能保存它们吗？我展示了一个使用鼠标滚轮插件的代码 HTML <body> <div id="workspace"> <div style="z-index: 101;"><img src="image1-300x300.jpg" />

我试图在“工作区”分区内缩放一些分区。我遇到的问题是它们之间的距离（我失去了它）

我读了很多关于CSS3转换的文章，特别是关于缩放、平移和原点的文章，但我不能解决这个问题

有人能解释一下我怎样才能保存它们吗？我展示了一个使用鼠标滚轮插件的代码

HTML

<body>
    <div id="workspace">
        <div style="z-index: 101;"><img src="image1-300x300.jpg" /></div>
        <div style="z-index: 102; left: 300px; top: 400px;"><img src="image2-400x400.jpg" /></div>
    </div>
</body>

JAVASCRIPT

$(document).ready(function () {
            var scale = 1;  // scale of the image
            var xLast = 0;  // last x location on the screen
            var yLast = 0;  // last y location on the screen
            var xImage = 0; // last x location on the image
            var yImage = 0; // last y location on the image

            // if mousewheel is moved
            $("#workspace").mousewheel(function (e, delta) {
                // find current location on screen 
                var xScreen = e.pageX - $(this).offset().left;
                var yScreen = e.pageY - $(this).offset().top;

                // find current location on the image at the current scale
                xImage = xImage + ((xScreen - xLast) / scale);
                yImage = yImage + ((yScreen - yLast) / scale);

                // determine the new scale
                if (delta > 0) {
                    scale *= 2;
                }
                else {
                    scale /= 2;
                }
                scale = scale < 1 ? 1 : (scale > 64 ? 64 : scale);

                // determine the location on the screen at the new scale
                var xNew = (xScreen - xImage) / scale;
                var yNew = (yScreen - yImage) / scale;

                // save the current screen location
                xLast = xScreen;
                yLast = yScreen;

                // redraw

                $('#mosaicContainer > div').each(function() {
                    $(this).css('-webkit-transform', 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')')
                    .css('-webkit-transform-origin', (xImage) + 'px ' + (yImage) + 'px');
                });

                return false;
            });
        });

$（文档）.ready（函数（）{
var scale=1；//图像的比例
var xLast=0；//屏幕上最后一个x位置
var yLast=0；//屏幕上最后一个y位置
var xImage=0；//图像上的最后一个x位置
var yImage=0；//图像上最后一个y位置
//如果移动鼠标滚轮
$（“#工作空间”）.mousewheel（函数（e，delta）{
//在屏幕上查找当前位置
var xScreen=e.pageX-$（this）.offset（）.left；
var ysscreen=e.pageY-$（this）.offset（）.top；
//以当前比例查找图像上的当前位置
xImage=xImage+（（xScreen-xLast）/scale）；
yImage=yImage+（（yScreen-yLast）/刻度）；
//确定新的比例
如果（增量>0）{
比例*=2；
}
否则{
比例/=2；
}
比例=比例<1？1：（比例>64？64：比例）；
//确定屏幕上新刻度的位置
变量xNew=（xScreen-xImage）/比例；
变量yNew=（YSscreen-yImage）/比例；
//保存当前屏幕位置
xLast=xScreen；
yLast=ysscreen；
//重画
$（'#mosaicContainer>div'）。每个（函数（）{
$（this.css（'-webkit transform'，'scale（'+scale++'），'+translate（'+xNew++'px'，+yNew++'px'++'））
.css（'-webkit transform origin'，（xImage）+“px”+（yImage）+“px”）；
});
返回false；
});
});

那么您是想让div变大，同时保持它们之间的空间不变？你打算让div靠近屏幕两侧吗？第一个问题是肯定的，第二个问题是如果div离开屏幕，这不是问题。这里有一个JS提琴，人们可以查看你的代码：谢谢@维萨默尔基克

$(document).ready(function () {
            var scale = 1;  // scale of the image
            var xLast = 0;  // last x location on the screen
            var yLast = 0;  // last y location on the screen
            var xImage = 0; // last x location on the image
            var yImage = 0; // last y location on the image

            // if mousewheel is moved
            $("#workspace").mousewheel(function (e, delta) {
                // find current location on screen 
                var xScreen = e.pageX - $(this).offset().left;
                var yScreen = e.pageY - $(this).offset().top;

                // find current location on the image at the current scale
                xImage = xImage + ((xScreen - xLast) / scale);
                yImage = yImage + ((yScreen - yLast) / scale);

                // determine the new scale
                if (delta > 0) {
                    scale *= 2;
                }
                else {
                    scale /= 2;
                }
                scale = scale < 1 ? 1 : (scale > 64 ? 64 : scale);

                // determine the location on the screen at the new scale
                var xNew = (xScreen - xImage) / scale;
                var yNew = (yScreen - yImage) / scale;

                // save the current screen location
                xLast = xScreen;
                yLast = yScreen;

                // redraw

                $('#mosaicContainer > div').each(function() {
                    $(this).css('-webkit-transform', 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')')
                    .css('-webkit-transform-origin', (xImage) + 'px ' + (yImage) + 'px');
                });

                return false;
            });
        });