散点图

分享于 

15分钟阅读

Web开发

  繁體

目录

简介

我为朋友 Janaina Moreira开发了一个项目,这是一个项目的第一部分,他在一名名为"。Bárbaras做 multeatro"的巴西剧院。

项目的目标是宣传公司的工作,同时为访客提供良好的音频和视觉经验。

有许多方法可以通过一种有序的方式通过照片集合来导航。 散乱的照片是一种不同的方法,比如当你把一个旧的盒子全部放在 table 上,随时随机挑选。 本文将处理这里技术,希望在某些方面对你有所帮助。

系统要求

为了运行本文中的散点图示例,你必须有支持 CSS3 2D 转换的浏览器:

  • IE 9或者更高版本
  • Firefox
  • Safari
  • Chrome

Polaroid盒

for框是将图片保存起来的元素,也可以接收鼠标功能所需的一些事件。

这是强制你在你的页面,或者另一个可以作为图片持有者的polaroid_box div

<body><divclass="polaroid_box"></div></body>

加载图像

图像加载在简单的字符串 array 中,这些字符串描述图像的网址路径:

$(document).ready(function () {
 var images = new Array();
 images[0] = 'Images/Barbaras1.jpg';
 images[1] = 'Images/Barbaras2.jpg';
 images[2] = 'Images/Barbaras3.jpg';
 images[3] = 'Images/Barbaras4.jpg';
 images[4] = 'Images/Barbaras5.jpg';
 images[5] = 'Images/Barbaras6.jpg';
 images[6] = 'Images/Barbaras7.jpg';
 images[7] = 'Images/Barbaras8.jpg';
 images[8] = 'Images/Barbaras9.jpg';
 images[9] = 'Images/Barbaras10.jpg';
 images[10] = 'Images/Barbaras11.jpg';
 images[11] = 'Images/Barbaras12.jpg';
 images[12] = 'Images/Barbaras13.jpg';
 images[13] = 'Images/Barbaras14.jpg';
 images[14] = 'Images/Barbaras15.jpg';
 images[15] = 'Images/Barbaras16.jpg';
 images[16] = 'Images/Barbaras17.jpg';
 images[17] = 'Images/Barbaras18.jpg';
 images[18] = 'Images/Barbaras19.jpg';
 images[19] = 'Images/Barbaras20.jpg';
. . .

加载 array 之后,可以调用 createPolaroids 函数以呈现所给父元素所需的所有DOM元素 inside:

...
 maxZIndex = images.length;
 createPolaroids($('.polaroid_box'), images);
...

创建快照

在这里,最重要的部分显然是创建的DOM元素,它将呈现页面中的for。 注意,我们将大量依赖的jQuery 框架。 这将减少大多数繁琐的工作,同时也确保我们避免 跨浏览器 问题。

function createPolaroids($parentEl, images) {
 var parentWidth = $parentEl.width();
 var parentHeight = $parentEl.height();
 for (var i = 0; i <images.length; i++) {
 var polaroidHtml = 
 '<div id="polaroid' + (i + 1) + '" class="polaroid">' +
 ' <img id="img' + (i + 1) + '" class="photo"/>' +
 ' <img src="Images/Polaroid_2.png" class="polaroid_photo"/>' +
 '</div>';
 $parentEl.append(polaroidHtml);
 var $polaroid = $('#polaroid' + (i + 1));
 var $img = $('#img' + (i + 1));
 var width = $polaroid.width();
 var height = $polaroid.height();
 $img.attr('src', images[i]);
 $polaroid.css('z-index', 1000);
 }
...

产生随机位置和旋转

我们需要生成每个照片的随机位置和旋转,否则不能叫做"分散"镜头。 所以,我们需要做的就是在屏幕( 也就是说,图片包含在一个盒子里,所以我们不希望我们的照片从屏幕上掉下来。)的可以接受边界之间生成数字。

for (var i = 0; i <images.length; i++) {
 var $el = $('#polaroid' + (i + 1));
 var windowWidth = $(window).width();
 var windowHeight = $(window).height();
 var offset = (windowWidth - windowHeight)/2;
 var width = $el.width();
 var height = $el.height();
 var rotation = Math.random() * maxRotationAngle * 2 - maxRotationAngle;
 var left = offset + Math.random() * (parentHeight - width);
 var top = Math.random() * (parentHeight - height);
. . .
}

现在我们已经收集了一个所需的所有数据,我们创建一个新的,类型的信息。 这将有助于封装数据并提供操作快照的方法。

for (var i = 0; i <images.length; i++) {
. . .
 polaroids[i] = new polaroid(i + 1, $el, $parentEl, minScale, 
 rotation, left, top, width/2, height/2, i);
}

然后信息作为构造函数提供给 polaroid 函数,然后将这些参数保存在实例中:

function polaroid(id, $el, $parentEl, scale, rotation, left, 
 top, xTransOrigin, yTransOrigin, zIndex) {
 this.id = id;
 this.$el = $el;
 this.$parentEl = $parentEl;
 this.scale = scale;
 this.rotation = rotation;
 this.originalScale = scale;
 this.originalRotation = rotation;
 this.originalLeft = left;
 this.originalTop = top;
 this.originalZIndex = zIndex;
 this.startRotation = rotation;
 this.left = left;
 this.top = top;
 this.xTransOrigin = xTransOrigin
 this.yTransOrigin = yTransOrigin;
 this.interval = null;
 this.isMoving = false;
 this.zIndex = zIndex;
 this.xOffset = 0;
 this.yOffset = 0;
}

定位和旋转 Polaroids

加载快照数据之后,我们可以调用 updateLayout Prototype函数,从而相应地更新所需的CSS属性:

polaroid.prototype.updateLayout = function () {
 this.$el.css('left', this.left + 'px');
 this.$el.css('top', this.top + 'px');
 this.$el.css('z-index', this.zIndex);
 var transform = 
 'rotate(' + this.rotation + 'deg) scale(' + this.scale + ')';
 this.$el.css({ "-webkit-transform": transform, 
 "-moz-transform": transform, msTransform: transform });
};

注意代码段 上面的最后一行为主要浏览器提供了CSS转换,这一点很重要:

  • -webkit-transform: Chrome 和 Safari
  • -moz-transform: Firefox
  • msTransform: IE

使用CSS3盒阴影的

CSS3盒阴影提供了我们的图片的阴影。 这是一个很好的特性,让我们的网页看起来有吸引力。 但是,在这个世界中大多数美好的事情中,你应该使用它进行审核。 根据你使用它的方式,盒子的阴影需要强烈的处理。 our polaroid 类定义一个带有( 4,4 ) 偏移量和深度为 32像素的长方体阴影:

.polaroid{
 ...
 -moz-box-shadow:4px4px32px #000;
 -webkit-box-shadow:4px4px32px #000;
 box-shadow:4px4px32px #000;
. . .}

在本文的后面,我们将在,动画中移除盒子阴影,以获得更好的性能。 因此,最好完全放弃使用盒子阴影,用 static 的图像替换它们,这样可以提高性能。

拖放快照

应用程序知道在 selectedPolaroid 变量中存储x 光片实例,将被拖动的。 当你点击一些照片时,将触发照片中的of事件,并且 selectedPolaroid 将被存储。

$('.polaroid').mousedown(function (event) {
 var id = $(this).attr('id');
 var i = id.replace('polaroid', '');
 var polaroid = polaroids[i - 1];
 if (polaroid.scale == minScale) {
 polaroid.zIndex = maxZIndex++;
 polaroid.updateLayout();
 if (selectedPolaroid) {
 selectedPolaroid = null;
 }
 else {
 selectedPolaroid = polaroid;
 selectedPolaroid.xOffset = event.pageX - selectedPolaroid.left;
 selectedPolaroid.yOffset = event.pageY - selectedPolaroid.top;
 }
 }
 else {
 if (zoomedPolaroid.id == polaroid.id) {
 polaroid.drop();
 }
 }
});

此时,任何鼠标移动都将被 mousemove的事件触发,并且选中的快照位置会被更新:

$polaroid_box.mousemove(function (event) {
 if (selectedPolaroid) {
 selectedPolaroid.left = event.pageX - selectedPolaroid.xOffset;
 selectedPolaroid.top = event.pageY - selectedPolaroid.yOffset;
 selectedPolaroid.updateLayout();
 }
});

当你释放鼠标按钮时,drag-and-drop就结束了。 此时,我们将 selectedPolaroid 变量设置为 null

$polaroid_box.mouseup(function (event) {
 if (selectedPolaroid) {
 selectedPolaroid.originalLeft = selectedPolaroid.left;
 selectedPolaroid.originalTop = selectedPolaroid.top;
 selectedPolaroid = null;
 }
});

拉一张照片

在某个时候,你会发现一个有趣的图片,希望看到它更接近。 所以你双击它,这将触发我们的应用程序中的动画功能,将带来一个 to。 画面看起来是 GREATER,在屏幕中央完全笔直。 这是由一个动画完成的,这是这个应用程序更复杂的部分,以后更好地解释。 一旦拍到了,我们将设置 zoomedPolaroid 变量,等待用户删除它或者双击它的他图片。

$('.polaroid').dblclick(function () {
 var id = $(this).attr('id');
 var i = id.replace('polaroid', '');
 var polaroid = polaroids[i - 1];
 if (zoomedPolaroid) {
 zoomedPolaroid.zIndex = maxZIndex++;
 zoomedPolaroid.updateLayout();
 zoomedPolaroid.drop(null, function () {
 zoomedPolaroid = null;
 });
 }
 if (polaroid.scale == minScale) {
 polaroid.originalZIndex = maxZIndex++;
 polaroid.zIndex = maxZIndex + 1000;
 polaroid.updateLayout();
 polaroid.pull(null, function () {
 zoomedPolaroid = polaroids[polaroid.id - 1];
 selectedPolaroid = null;
 });
 } else {
 polaroid.originalZIndex = maxZIndex++;
 polaroid.zIndex = maxZIndex++;
 polaroid.drop();
 }
});

Dropping Polaroid

当用户点击它或者双击另一张照片时,放大的polaroid将被删除。 这将开始反向动画,并且,将离开屏幕中心,回到它的前一位置,比例和旋转角度。

通过JavaScript动画转换

动画是复杂的部分。 它们需要目标尺度。目标旋转角度和目标位置。 由于可能会进入中心或者返回到它的前面的位置,我们将通过封装核心功能 inside 来避免代码重复。

首先,我们计算 delta ( 一个用于角度,另一个用于比例,另一个用于位置)。 然后我们计算( 即,每次迭代时应用于当前动画值的增量)的步骤。 然后我们启动 setInterval 函数重新定位快照,旋转它并更新底层DOM元素,直到动画到达目标值。

polaroid.prototype.animate = function (targetScale, targetRotation, 
 targetLeft, targetTop, beginCallback, endCallback) {
 var pol = this;
 if (pol.isMoving)
 return;
 pol.isMoving = true;
 var parentWidth = this.$parentEl.width();
 var parentHeight = this.$parentEl.height();
 var polaroid = pol;
 if (beginCallback)
 beginCallback(polaroid);
 var angleDelta = targetRotation - polaroid.rotation;
 var scaleDelta = targetScale - polaroid.scale;
 var leftDelta = targetLeft - polaroid.left;
 var topDelta = targetTop - polaroid.top;
 var steps = animationSteps;
 var scaleStep = scaleDelta/steps;
 var rotationStep = angleDelta/steps;
 var leftStep = leftDelta/steps;
 var topStep = topDelta/steps;
 var interval;
 var rotation = polaroid.rotation;
 var scale = polaroid.scale;
 var left = polaroid.left;
 var top = polaroid.top;
 var $polaroid = $('#polaroid' + pol.id);
 $polaroid.css('z-index', 100);
 $polaroid.css({ "-moz-box-shadow": "0 0 0 #fff" });
 $polaroid.css({ "-webkit-box-shadow": "0 0 0 #fff" });
 $polaroid.css({ "box-shadow": "0 0 0 #fff" });
 var interval = setInterval(function () {
 if (
 (scaleStep> 0 && scale> = targetScale) ||
 (scaleStep <0 && scale <= targetScale)
 ) {
 scale = targetScale;
 }
 $polaroid.css({ WebkitTransform: 'rotate(' + rotation + 
 'deg) scale(' + scale + ')' });
 $polaroid.css({ '-moz-transform': 'rotate(' + rotation + 
 'deg) scale(' + scale + ')' });
 $polaroid.css({ msTransform: 'rotate(' + rotation + 
 'deg) scale(' + scale + ')' });
 $polaroid.css('left', left + 'px');
 $polaroid.css('top', top + 'px');
 if (scale == targetScale) {
 $polaroid.css({ "-moz-box-shadow": "4px 4px 32px #000" });
 $polaroid.css({ "-webkit-box-shadow": "4px 4px 32px #000" });
 $polaroid.css({ "box-shadow": "4px 4px 32px #000" });
 pol.isMoving = false;
 clearInterval(interval);
 rotation = targetRotation;
 scale = targetScale;
 left = targetLeft;
 top = targetTop;
 pol.rotation = targetRotation;
 pol.scale = targetScale;
 pol.left = targetLeft;
 pol.top = targetTop;
 pol.updateLayout();
 if (endCallback)
 endCallback(polaroid);
 }
 rotation += rotationStep;
 scale += scaleStep;
 left += leftStep;
 top += topStep;
 }, 5);
};

final 注意事项

我希望你喜欢这篇文章和代码。 我认为这里介绍的技术简单实用。 请让我知道你对它的思考,在下面的章节中留下一个评论。

历史

  • 2011-08-28: 初始版本。

SCA  Scatter